JSX 与语法

JSX 是 JavaScript 的语法扩展，在代码中编写类似 HTML 的结构。编译后变为 React.createElement 调用。见 React 基础。

基本规则

tsx

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

规则	说明
必须有一个根节点	多个并列节点用 `<>...</>`（Fragment）或 `<Fragment>` 包裹
使用 `className`	对应 HTML 的 `class`
使用 `htmlFor`	对应 `for`
自闭合标签	`<img />`、`<input />` 等须闭合
驼峰属性	`onClick`、`tabIndex`

花括号内可写任意 JavaScript 表达式（非语句）：

tsx

const name = "React";
const count = 3;
return (
  <p>
    {name} · {count > 0 ? "有数据" : "空"}
  </p>
);

tsx

// 条件
{isLoggedIn ? <Dashboard /> : <Login />}

// 列表（必须稳定 key）
<ul>
  {items.map((item) => (
    <li key={item.id}>{item.title}</li>
  ))}
</ul>

key：应使用列表项稳定唯一 id，不要用随机数或数组下标（在重排、插入时会导致状态错乱），除非列表静态且不重排。

tsx

// 内联对象
<div style={{ color: "red", marginTop: 8 }} />

// CSS 类
import styles from "./Card.module.css";
<div className={styles.card} />

.tsx 文件中可为 props 与事件标注类型；详见 TypeScript。

以下链接在编写时均可正常访问：