当前位置：首页 > article >正文

【React】JSX规则

article 2024/11/7 16:18:49

JSX规则

1. 只能返回一个根元素

如果想要在一个组件中包含多个元素，需要用一个父标签把它们包裹起来。例如，你可以使用一个 <div> 标签或者用 <> 和 </> 元素来代替：

JSX标签需要被一个父元素包裹的原因：

JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，你不能在一个函数中返回多个对象，除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。

2. 标签必须闭合

JSX 要求标签必须正确闭合。像 <img> 这样的自闭合标签必须书写成 <img />，而像 <li>oranges 这样只有开始标签的元素必须带有闭合标签，需要改为 <li>oranges</li>。

3. 使用驼峰式命名法给属性命名

JSX 最终会被转化为 JavaScript，而 JSX 中的属性也会变成 JavaScript 对象中的键值对。在你自己的组件中，经常会遇到需要用变量的方式读取这些属性的时候。但 JavaScript 对变量的命名有限制。例如，变量名称不能包含 - 符号或者像 class 这样的保留字。

这就是为什么在 React 中，大部分 HTML 和 SVG 属性都用驼峰式命名法表示。例如，需要用 marginTop 代替 margin-top。由于 class 是一个保留字，所以在 React 中需要用 className 来代替。参考 DOM 属性中的命名

一个正确的JSX格式：

export default function TodoList() {
  return (
    <>
      <h1>待办事项</h1>
      <img 
        src="https://i.imgur.com/yXOvdOSs.jpg" 
        alt="Hedy Lamarr" 
        className="photo" 
      />
      <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
      </ul>
    </>
  );
}