JSX 语法

什么是 JSX？

JSX（JavaScript XML）是 React 提供的一种语法扩展，允许开发者在 JavaScript 代码中编写类似 HTML 的结构。它并不是 HTML，而是 JavaScript 的一种语法糖，最终会被编译为普通的 JavaScript 函数调用（React.createElement()）。

基本语法示例

const element = <h1>Hello, React!</h1>;

JSX 的特点

  1. 嵌入表达式

    • 可以在 JSX 中使用 {} 包裹任意 JavaScript 表达式：
      const name = 'Alice';
const element = <h1>Hello, {name}</h1>;

  2. 属性命名

    • 使用驼峰命名法（如 className 代替 class，onClick 代替 onclick）：
      <div className="container" onClick={handleClick}>
  Content
</div>

  3. 自闭合标签

    • 类似 HTML，但必须闭合（如 <img /> 而不是 <img>）。

  4. 片段（Fragment）

    • 返回多个元素时需包裹在 <React.Fragment> 或简写 <> 中：
      function Component() {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
}

JSX 编译过程

JSX 会被 Babel 编译为 React.createElement() 调用。例如：

<div id="root">Hello</div>

编译后：

React.createElement("div", { id: "root" }, "Hello");

注意事项

  1. 必须引入 React

    • 即使未直接使用 React 变量，JSX 依赖 React 的作用域。
    import React from 'react'; // React 17+ 可省略（使用 JSX Transform）

  2. 避免使用 JavaScript 保留字

    • 如 class 需写成 className，for 需写成 htmlFor。

  3. 样式对象

    • 内联样式需传入对象，属性名驼峰命名：
      <div style={{ color: 'red', fontSize: '16px' }}>Text</div>

实战练习

尝试编写一个 JSX 组件，动态渲染用户信息：

function UserProfile({ name, age }) {
  return (
    <div className="profile">
      <h2>{name}</h2>
      <p>Age: {age}</p>
      {age >= 18 ? <p>Adult</p> : <p>Minor</p>}
    </div>
  );
}

提示：JSX 的本质是 JavaScript，因此可以灵活结合逻辑（如三元表达式、map 渲染列表等）。

Last Updated::