跳到主要内容

JSX 语法

本章节将介绍 JSX 语法，这是 React 中用于描述 UI 的语法扩展。

什么是 JSX？​

JSX 是 JavaScript 的语法扩展，允许在 JavaScript 中编写类似 HTML 的代码。

const element = <h1>你好，React！</h1>;

JSX 看起来像 HTML，但实际上它是一种 JavaScript 表达式。

JSX 基础语法​

1. 基本使用​

// 在 JSX 中使用 HTML 标签
const element = <h1>Hello World</h1>;

// 可以在 JSX 中嵌入 JavaScript 表达式
const name = "张三";
const element = <h1>你好，{name}！</h1>;

2. 嵌入表达式​

const a = 10;
const b = 20;

// 可以在 {} 中使用任何 JavaScript 表达式
const element = (
  <div>
    <p>a + b = {a + b}</p>
    <p>今天是 {new Date().toLocaleDateString()}</p>
  </div>
);

3. 条件渲染​

const isLoggedIn = true;

// 使用三元运算符
const element = (
  <div>
    {isLoggedIn ? (
      <h1>欢迎回来！</h1>
    ) : (
      <h1>请登录</h1>
    )}
  </div>
);

// 使用逻辑与运算符
const element = (
  <div>
    {isLoggedIn && <h1>欢迎回来！</h1>}
  </div>
);

4. 列表渲染​

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

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

JSX 属性​

1. 字符串属性​

const element = <div className="container">内容</div>;
const element = <input type="text" placeholder="请输入" />;

2. JavaScript 表达式作为属性​

const isActive = true;
const element = <button className={isActive ? "active" : ""}>按钮</button>;

3. 展开运算符​

const props = { className: "container", id: "main" };
const element = <div {...props}>内容</div>;

JSX 与 HTML 的区别​

1. className​

在 JSX 中使用 className 而不是 class：

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

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

2. style 属性​

JSX 的 style 接受一个对象，而不是字符串：

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

// 正确
const element = (
  <div style={{ color: "red", fontSize: "16px" }}>内容</div>
);

// 更常见的写法
const styles = {
  color: "red",
  fontSize: "16px"
};
const element = <div style={styles}>内容</div>;

3. 自闭合标签​

// 必须闭合标签
const element = <img src="logo.png" />;
const element = <input type="text" />;

4. 驼峰式命名​

JSX 属性使用驼峰式命名：

// className（不是 class）
// onClick（不是 onclick）
// onChange（不是 onchange）
// tabIndex（不是 tabindex）

const element = (
  <button onClick={() => alert("点击")} tabIndex={0}>
    按钮
  </button>
);

JSX 原理​

JSX 会被编译成 JavaScript：

// JSX
const element = <h1 className="title">Hello</h1>;

// 编译后
const element = React.createElement(
  "h1",
  { className: "title" },
  "Hello"
);

React.createElement 会创建一个描述 DOM 结构的对象（虚拟 DOM）。

Fragment​

使用 Fragment 可以避免多余的 DOM 节点：

// 会产生额外的 div 包裹
const element = (
  <div>
    <h1>标题</h1>
    <p>内容</p>
  </div>
);

// 使用 Fragment，不会产生额外的 DOM 节点
import { Fragment } from "react";

const element = (
  <Fragment>
    <h1>标题</h1>
    <p>内容</p>
  </Fragment>
);

// 简写形式
const element = (
  <>
    <h1>标题</h1>
    <p>内容</p>
  </>
);

在 JSX 中注释​

const element = (
  <div>
    {/* 这是一个注释 */}
    <h1>标题</h1>
  </div>
);

小结​

本章我们学习了：

  1. JSX 的基本语法
  2. 在 JSX 中嵌入 JavaScript 表达式
  3. 条件渲染和列表渲染
  4. JSX 属性的使用
  5. JSX 与 HTML 的区别
  6. Fragment 的使用

练习​

  1. 创建一个显示当前时间的组件
  2. 创建一个根据条件显示不同内容的组件
  3. 创建一个显示水果列表的组件
  4. 创建一个使用样式的组件