JSX 是一种语法扩展，允许你在 TypeScript 代码中使用类似于 XML 的语法来创建 React 组件。它的优点包括可读性和可维护性更强、代码更少、IDE 支持更好，使用方法是导入 React 模块并启用 JSX 编译器选项。JSX 元素可以具有属性（使用花括号传递）和嵌套元素。需要注意的是，使用 JSX 时需要导入 React 模块，JSX 标签必须闭合，属性必须用花括号括起来。
TypeScript 中的 JSX
JSX 是什么？
JSX（JavaScript XML）是一种语法扩展，允许你在 TypeScript 代码中使用类似于 XML 的语法。它用于生成 React 组件。
优势
使用 JSX 有几个优势：
- 更具可读性和可维护性：JSX 使得编写 React 组件变得更直观和清晰。
- 更少的代码：使用 JSX 可以减少重复的代码，例如创建元素和设置属性。
- 更好的 IDE 支持：大多数 IDE 提供对 JSX 的语法高亮和自动完成功能。
使用方法
要使用 JSX，你需要导入 React 模块并启用 JSX 编译器选项。
<code class="typescript">import React from "react";
// 启用 JSX 编译器选项
// tsconfig.json
{
"compilerOptions": {
"jsx": "react-jsx"
}
}</code>然后，你可以使用 JSX 语法创建 React 组件。例如：
<code class="typescript">const MyComponent = () => {
return (
<div>
<h1>标题</h1>
<p>段落</p>
</div>
);
};</code>属性
JSX 元素可以具有属性，就像 HTML 元素一样。传递属性时，必须使用花括号 { }。例如：
<code class="typescript">const Button = (props) => {
return (
<button onClick={props.onClick}>
{props.label}
</button>
);
};</code>嵌套元素
JSX 元素可以嵌套在其他元素中。例如：
<code class="typescript">const App = () => {
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
};</code>注意事项
- 在使用 JSX 时，你需要确保导入
React模块。 - JSX 标签必须总是闭合。
- 属性必须用花括号
{ }括起来。
