7. JSX 基础语法

标签必须闭合

JSX 里所有标签都必须正确闭合。两种情况：

双标签：有开始有结束

<div>内容</div>
<p>段落</p>

自闭合标签：没有子元素的标签，必须以 /> 结尾

// 错误
<img src="photo.jpg">
<input>
<br>

// 正确
<img src="photo.jpg" />
<input />
<br />

属性命名规则

JSX 属性遵循三个规则：

1. 驼峰命名

多词属性用驼峰式：

HTML	JSX
tabindex	tabIndex
readonly	readOnly
maxlength	maxLength
cellspacing	cellSpacing
stroke-width	strokeWidth

<input
  type="text"
  maxLength={10}
  readOnly={true}
  tabIndex={0}
/>

2. 保留字替换

class 和 for 是 JavaScript 保留字，在 JSX 里要替换：

HTML	JSX
class	className
for	htmlFor

<label htmlFor="username">用户名</label>
<input id="username" className="input-field" />

3. 例外：data-* 和 aria-*

这两个前缀的属性保持原样，不用驼峰：

<div data-id="123" aria-label="关闭按钮">
  ×
</div>

属性值的写法

属性值有两种写法：

字符串字面量：用引号

<img className="avatar" />

JavaScript 表达式：用花括号

<img className={isActive ? 'active' : 'default'} />
<input maxLength={10} />
<div style={{ color: 'red' }} />

子元素

标签内部的内容就是子元素。可以是文本、表达式或其他 JSX：

<div>
  这是文本
  <span>这是子标签</h1>
  {1 + 1}
</div>

没有子元素的标签

没有内容的标签写成自闭合形式：

<img src="photo.jpg" />

而不是：

<img src="photo.jpg"></img>

虽然语法上没错，但自闭合更简洁。

Fragment：不额外添加 DOM

JSX 只能有一个根元素。当你不想多加一个 <div> 时，用 Fragment：

// 用 div 包裹——会多一个 DOM 节点
function Post() {
  return (
    <div>
      <h1>标题</h1>
      <p>内容</p>
    </div>
  );
}

// 用 Fragment——不会多节点
function Post() {
  return (
    <>
      <h1>标题</h1>
      <p>内容</p>
    </>
  );
}

<>...</> 是 <React.Fragment>...</React.Fragment> 的简写。

Fragment 的简写限制

简写形式 <>...</> 不能带属性。如果你需要给 Fragment 加 key（比如列表渲染），必须用完整写法：

import { Fragment } from 'react';

{items.map(item => (
  <Fragment key={item.id}>
    <dt>{item.name}</dt>
    <dd>{item.desc}</dd>
  </Fragment>
))}

注释

JSX 里写注释要用 {} 包裹 JavaScript 注释：

<div>
  {/* 这是 JSX 注释 */}
  <h1>标题</h1>
  {
    // 这也是注释
  }
  <p>内容</p>
</div>

常见错误排查

错误 1：相邻 JSX 没有包裹

// 报错
return (
  <h1>标题</h1>
  <p>内容</p>
);

// 修复
return (
  <>
    <h1>标题</h1>
    <p>内容</p>
  </>
);

错误 2：标签未闭合

// 报错
<img src="photo.jpg">

// 修复
<img src="photo.jpg" />

错误 3：用了 class 而不是 className

// 警告
<div class="box">

// 修复
<div className="box">

React 会在控制台打印警告，告诉你应该用 className。

本节小结

• 所有标签必须闭合，自闭合标签用 />
• 属性用驼峰命名，class → className，for → htmlFor
• 属性值用引号（字符串）或 {}（表达式）
• 用 <>...</> Fragment 避免多余的 DOM 节点
• 注释用 {/* */}

下一节学 JavaScript 在 JSX 中的用法。