JSX 语法基础

JSX 是 React 的核心模板语法，它允许我们在 JavaScript 中编写类似 HTML 的代码。本章节将介绍 JSX 的基本语法规则和使用方法。

5.1 什么是JSX？

JSX（JavaScript XML）是一种 JavaScript 的扩展语法，它允许我们在 JavaScript 代码中直接编写 HTML 结构。

语法本质

• JSX 不是 HTML，而是一种 JavaScript 语法扩展
• JSX 会被 Babel 等工具编译成普通的 JavaScript 代码
• JSX 允许我们在模板中嵌入 JavaScript 表达式

与HTML的区别

• JSX 中使用 className 而不是 class
• JSX 中使用 htmlFor 而不是 for
• JSX 中可以嵌入 JavaScript 表达式
• JSX 中的属性名使用驼峰命名法

5.2 JSX 基础语法规则

标签必须闭合

• 所有标签都必须闭合，包括自闭合标签
• 正确：<div></div>、<img />
• 错误：<div>、<img>

嵌套规范

• 标签必须正确嵌套
• 正确：<div><p>内容</p></div>
• 错误：<div><p>内容</div></p>

className 替代 class

• 在 JSX 中，使用 className 而不是 class
• 原因：class 是 JavaScript 的关键字

// 正确
<div className="container">内容</div>

// 错误
<div class="container">内容</div>

内联样式写法

• 在 JSX 中，内联样式使用对象形式
• 样式属性名使用驼峰命名法

// 正确
<div style={{ color: 'red', fontSize: '16px' }}>内容</div>

// 错误
<div style="color: red; font-size: 16px;">内容</div>

注释写法

• 在 JSX 中，注释使用 {/* 注释内容 */} 格式

<div>
  {/* 这是一个注释 */}
  <p>内容</p>
</div>

5.3 JSX 中嵌入表达式

在 JSX 中，我们可以使用 {} 来嵌入 JavaScript 表达式。

基本用法

const name = 'React';

return (
  <div>
    <h1>Hello, {name}!</h1>
    <p>当前时间：{new Date().toLocaleString()}</p>
  </div>
);

表达式类型

• 变量
• 函数调用
• 算术表达式
• 逻辑表达式
• 三元表达式

const count = 10;
const isLoggedIn = true;

return (
  <div>
    <p>计数：{count}</p>
    <p>计数的平方：{count * count}</p>
    <p>是否登录：{isLoggedIn ? '已登录' : '未登录'}</p>
    <p>随机数：{Math.random()}</p>
  </div>
);

5.4 JSX 条件渲染

if-else

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>欢迎回来！</h1>;
  } else {
    return <h1>请登录</h1>;
  }
}

三元表达式

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>欢迎回来！</h1> : <h1>请登录</h1>}
    </div>
  );
}

逻辑与 &&

function Notification({ message }) {
  return (
    <div>
      {message && <p>{message}</p>}
    </div>
  );
}

5.5 JSX 列表渲染

map 方法

在 React 中，我们使用 map 方法来渲染列表。

const fruits = ['苹果', '香蕉', '橙子'];

return (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>
    ))}
  </ul>
);

key 值的作用与注意事项

• key 是 React 用来识别列表项的唯一标识
• 重要性：帮助 React 高效地更新 DOM
• 注意事项：
  • 不要使用索引作为 key（当列表项可能被重新排序时）
  • 应该使用唯一且稳定的标识符作为 key
  • 每个列表项的 key 必须是唯一的

// 推荐
const users = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' }
];

return (
  <ul>
    {users.map(user => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

5.6 JSX 禁止使用的语法陷阱

1. 不能在 JSX 中使用 if 语句

// 错误
return (
  <div>
    if (isLoggedIn) {
      <h1>欢迎回来！</h1>
    }
  </div>
);

// 正确
return (
  <div>
    {isLoggedIn && <h1>欢迎回来！</h1>}
  </div>
);

2. 不能在 JSX 中使用 for 循环

// 错误
return (
  <ul>
    for (let i = 0; i < 5; i++) {
      <li>{i}</li>
    }
  </ul>
);

// 正确
return (
  <ul>
    {Array.from({ length: 5 }).map((_, i) => (
      <li key={i}>{i}</li>
    ))}
  </ul>
);

3. 不能直接在 JSX 中使用对象

// 错误
const user = { name: '张三', age: 20 };

return (
  <div>
    {user}
  </div>
);

// 正确
return (
  <div>
    <p>姓名：{user.name}</p>
    <p>年龄：{user.age}</p>
  </div>
);

4. 不能在 JSX 中使用 this 指向组件实例（函数组件）

// 错误（函数组件）
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>计数：{this.state.count}</p>
      <button onClick={this.increment}>增加</button>
    </div>
  );
}

// 正确（函数组件）
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

实战练习

练习1：基本 JSX 结构

function App() {
  return (
    <div className="app">
      <header className="header">
        <h1>React JSX 练习</h1>
      </header>
      <main className="main">
        <p>这是一个基本的 JSX 结构示例</p>
      </main>
      <footer className="footer">
        <p>© 2026 React 教程</p>
      </footer>
    </div>
  );
}

练习2：条件渲染和列表渲染

function App() {
  const isLoggedIn = true;
  const fruits = ['苹果', '香蕉', '橙子'];
  
  return (
    <div className="app">
      {isLoggedIn ? (
        <div>
          <h2>欢迎回来！</h2>
          <p>你喜欢的水果：</p>
          <ul>
            {fruits.map((fruit, index) => (
              <li key={index}>{fruit}</li>
            ))}
          </ul>
        </div>
      ) : (
        <h2>请登录查看内容</h2>
      )}
    </div>
  );
}

练习3：内联样式和表达式

function App() {
  const name = 'React';
  const age = 10;
  const style = {
    color: 'blue',
    fontSize: '18px',
    backgroundColor: 'lightgray',
    padding: '10px',
    borderRadius: '5px'
  };
  
  return (
    <div className="app">
      <div style={style}>
        <h1>Hello, {name}!</h1>
        <p>React 已经 {age} 岁了</p>
        <p>当前时间：{new Date().toLocaleString()}</p>
        <p>随机数：{Math.random().toFixed(2)}</p>
      </div>
    </div>
  );
}

通过本章节的学习，你已经掌握了 JSX 的基本语法规则和使用方法。JSX 是 React 开发的核心，掌握好 JSX 对于学习 React 至关重要。