JSX语法深度解析：从表达式到事件绑定的完整指南

说实话，JSX 是 React 最让我着迷的特性之一。它看起来像 HTML，但本质上却是 JavaScript 的语法糖。很多初学者会觉得它「不伦不类」，但用久了你会发现——这种设计恰恰是 React 的精髓所在。

今天我就带你彻底搞懂 JSX 的五个核心用法。嗯，都是我在项目中踩过坑、流过泪总结出来的经验。

JSX 表达式：花括号里的秘密

JSX 里怎么嵌入动态内容？用花括号 {}。这玩意儿就像一扇门，把 JavaScript 世界和 HTML 世界打通了。

const name = '张三';
const age = 25;
const element = <h1>你好，{name}，你今年 {age} 岁了</h1>;

花括号里可以放什么？

• 变量：字符串、数字、布尔值
• 表达式：{1 + 2}、{user.name}
• 函数调用：{formatDate(date)}
• JSX 本身：没错，可以嵌套

还有一个坑：false、null、undefined 和 true 在 JSX 中不会被渲染。但 0 和空字符串 '' 会！

// 这些都不会渲染
{false}
{null}
{undefined}
{true}

// 但 0 会渲染成 "0"
{0}

我在项目中就遇到过这个问题：一个列表长度为 0 时，{list.length && <List />} 居然渲染出了一个 "0"。后来改成 {list.length > 0 && <List />} 才解决。

JSX 条件渲染：三目运算符是你的好朋友

条件渲染说白了就是「满足条件就显示，不满足就不显示」。React 里没有 v-if 这种指令，全靠 JavaScript 自己搞定。

我个人最常用的是三目运算符：

const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn ? <UserPanel /> : <LoginButton />}
  </div>
);

还有几种常见写法：

方式	代码示例	适用场景
三目运算符	{condition ? <A /> : <B />}	二选一
逻辑与	{condition && <A />}	显示/隐藏
立即执行函数	{(() => { ... })()}	复杂逻辑
变量提前赋值	let content; if(...) content = ...	多分支

JSX 列表渲染：key 是灵魂

列表渲染用 map()，这几乎是 React 开发者的肌肉记忆了。但 key 这个属性，很多人只是「知道要加」，却不知道为什么。

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

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

key 的作用是什么？说白了就是给 React 一个「身份标识」。当列表发生变化时，React 通过 key 来判断哪些元素是新增的、哪些是删除的、哪些是移动的。

那用什么做 key？

• 数据库 ID（最推荐）
• UUID 或 nanoid 生成的唯一标识
• 内容的哈希值（如果内容不变的话）

JSX 样式处理：内联样式 vs CSS 类名

React 里写样式有两种方式，我一般混合使用。

内联样式：用双花括号，属性名用驼峰命名

const style = {
  color: 'blue',
  fontSize: '16px',
  backgroundColor: '#f0f0f0',
  padding: '10px 20px',
};

const element = <div style={style}>内联样式</div>;

CSS 类名：用 className 而不是 class

const element = <div className="container active">类名样式</div>;

动态类名怎么处理？我推荐用模板字符串或者 classnames 库：

// 模板字符串
const className = `btn ${isActive ? 'btn-active' : ''} ${isDisabled ? 'btn-disabled' : ''}`;

// classnames 库（更优雅）
import classnames from 'classnames';
const className = classnames('btn', {
  'btn-active': isActive,
  'btn-disabled': isDisabled,
});

JSX 中的事件绑定：告别 addEventListener

React 里绑定事件超级简单，直接用驼峰命名的事件名：

function handleClick() {
  console.log('按钮被点击了');
}

const button = <button onClick={handleClick}>点我</button>;

注意几个关键点：

• 事件名是 onClick、onChange、onSubmit 这种驼峰格式
• 传递的是函数引用，不是字符串：onClick={handleClick} 而不是 onClick="handleClick()"
• React 做了事件委托，所有事件都挂载在根节点上

传参怎么办？有两种方式：

// 方式一：箭头函数（推荐）
<button onClick={() => handleDelete(user.id)}>删除</button>

// 方式二：bind
<button onClick={handleDelete.bind(this, user.id)}>删除</button>

还有一个常见问题：阻止默认行为和事件冒泡。

function handleSubmit(e) {
  e.preventDefault();  // 阻止表单提交
  e.stopPropagation(); // 阻止事件冒泡
  // 处理逻辑...
}

React 的事件对象 e 是合成事件（SyntheticEvent），它是对原生事件的封装。不用担心跨浏览器兼容问题，React 都帮你处理好了。

总结一下

JSX 这五个知识点，说白了就是 React 组件的「骨架」和「血肉」：

• 表达式：让 JSX 活起来
• 条件渲染：让组件有判断能力
• 列表渲染：让组件能处理数据集合
• 样式处理：让组件好看
• 事件绑定：让组件能交互

掌握了这些，你已经能写出大部分业务组件了。下一章我们会深入组件的核心——Props 和 State，那才是 React 真正精彩的地方。