JSX 的语法规则是什么？

推荐答案

JSX 的语法规则主要包括以下几点：

1. 标签必须闭合：无论是单标签还是双标签，都必须正确闭合。
2. 标签名区分大小写：JSX 标签名是区分大小写的，HTML 标签名必须小写，自定义组件名必须大写。
3. 属性名采用驼峰命名：JSX 中的属性名采用驼峰命名法，例如 className 而不是 class。
4. 表达式用花括号包裹：在 JSX 中嵌入 JavaScript 表达式时，需要用花括号 {} 包裹。
5. 注释写法：JSX 中的注释需要用花括号包裹，例如 {/* 注释内容 */}。
6. 根元素唯一：JSX 表达式必须有一个根元素，可以使用 <React.Fragment> 或 <> 来包裹多个元素。

本题详细解读

1. 标签必须闭合

在 JSX 中，所有的标签都必须闭合。对于单标签（如 <img>），必须写成自闭合形式 <img />。对于双标签（如 <div>），必须正确闭合 <div></div>。

2. 标签名区分大小写

JSX 标签名是区分大小写的。HTML 标签名必须小写，例如 <div>、<span>。而自定义组件名必须以大写字母开头，例如 <MyComponent />。

3. 属性名采用驼峰命名

JSX 中的属性名采用驼峰命名法，这与 HTML 中的属性名有所不同。例如，HTML 中的 class 在 JSX 中应写成 className，for 应写成 htmlFor。

4. 表达式用花括号包裹

在 JSX 中嵌入 JavaScript 表达式时，需要用花括号 {} 包裹。例如：

const name = 'React';
const element = <h1>Hello, {name}</h1>;

5. 注释写法

在 JSX 中写注释时，需要用花括号包裹注释内容。例如：

<div>
  {/* 这是一个注释 */}
  <h1>Hello, World!</h1>
</div>

6. 根元素唯一

JSX 表达式必须有一个根元素。如果需要在 JSX 中返回多个元素，可以使用 <React.Fragment> 或 <> 来包裹这些元素。例如：

return (
  <>
    <h1>Title</h1>
    <p>Content</p>
  </>
);