JSX 语法完整详解指南

本文详细介绍 JSX 的核心语法规则、常见写法、注意事项与最佳实践，适用于
React 初学者与进阶学习者。

一、什么是 JSX？

JSX（JavaScript XML）是一种 JavaScript 的语法扩展，用于描述 UI
结构：

1	const element = <h1>Hello, JSX!</h1>;

它本质上会被编译为：

1	const element = React.createElement("h1", null, "Hello, JSX!");

📌 JSX 的特点：

看起来像 HTML
实际是 JavaScript 表达式
必须经过 Babel 转译
只能返回一个根节点

二、JSX 的基本书写规则

1. 必须有根元素

❌ 错误写法：

return (
  <h1>Title</h1>
  <p>content</p>
);

✔ 正确写法：

return (
  <div>
    <h1>Title</h1>
    <p>content</p>
  </div>
);

或使用片段：

return (
  <>
    <h1>Title</h1>
    <p>content</p>
  </>
);

三、在 JSX 中使用表达式

表达式用 {} 包裹。

1
2
3

const name = "React";

const element = <h1>Hello, {name}</h1>;

支持：

变量
函数调用
运算表达式
三元表达式

示例：

1	const element = <p>{1 + 2 + 3}</p>;

❌ 不支持语句（如 if、for）

四、属性（Props）写法

1. 基本属性

1	const img = <img src="logo.png" alt="logo" />;

2. 动态属性

1 2	const url = "logo.png"; const img = <img src={url} />;

3. className 代替 class

1	<div className="container"></div>

因为 class 是 JS 关键字

4. 驼峰命名事件

1	<button onClick={handleClick}>Click</button>

五、JSX 与样式

1. 行内样式

1
2
3

const style = { color: "red", fontSize: "20px" };

<p style={style}>Hello</p>;

直接写：

1	<p style={{ color: "blue" }}>Text</p>;

⚠ 注意：是对象

2. className 样式

1	<p className="text">Hello</p>

六、条件渲染

1. 三元表达式

1	{isLogin ? <p>Welcome</p> : <p>Please Login</p>}

2. && 逻辑渲染

1	{unread && <p>You have unread messages</p>}

七、列表渲染（重要）

const list = ["A", "B", "C"];

<ul>
  {list.map(item => (
    <li key={item}>{item}</li>
  ))}
</ul>

⚠ 必须有 key 属性

八、JSX 中的事件处理

function App() {
  function handleClick() {
    alert("Clicked");
  }

  return <button onClick={handleClick}>Click</button>;
}

传递参数：

1	<button onClick={() => handleClick(123)}>Click</button>

九、JSX 中注释的写法

return (
  <div>
    {/* 这是注释 */}
    <p>Hello</p>
  </div>
);

十、JSX 和 Fragment（片段）

防止多层 div 套娃

<>
  <h1>A</h1>
  <h2>B</h2>
</>

等价：

1	<React.Fragment></React.Fragment>

十一、JSX 防 XSS 注入

默认安全：

1 2	const content = "<h1>Hack</h1>"; <div>{content}</div> // 不会执行 html

⚠ 以下会执行 HTML：

1	<div dangerouslySetInnerHTML={{ __html: content }} />

❗ 谨慎使用

十二、受控与非受控表单

受控：

1
2
3

const [value, setValue] = useState("");

<input value={value} onChange={e => setValue(e.target.value)} />

非受控：

1	<input defaultValue="text" />

十三、JSX 与 TypeScript（TSX）

interface Props {
  name: string;
}

function Hello(props: Props) {
  return <h1>{props.name}</h1>;
}

文件后缀：.tsx

十四、常见错误总结

❌ if 写在 JSX 中

❌ for 写在 JSX 中

✔ 使用 map + 三元运算

十五、最佳实践

使用 Fragment 减少无意义 div
key 不用 index（除非静态列表）
逻辑放到函数里，不要写 JSX 里太复杂
保持 JSX 小函数、可读性高

🎉 总结

你现在掌握了：

JSX 基础语法
表达式与属性
条件/列表渲染
事件与表单
Fragment
安全问题与 TSX

👉 你还可以继续学习： - Hooks - 组件通信 - Context/Redux - 性能优化 -
SSR 与 Next.js

Klein's-blue的博客

JSX语法