JSX里怎么插入JavaScript表达式？大括号能写什么？

一、JSX 大括号的四种插入位置

JSX 并不是模板语言，它是 JavaScript 语法的扩展。在编写组件 UI 时，花括号主要出现在以下四种合法场景中：

1. 标签子内容（Child Content）

当需要将动态变量或计算结果作为标签内部的文字或子节点展示时，直接在标签开闭符号之间使用大括号包裹表达式：

const userName = '李四';
const unreadCount = 5;

// 大括号内计算拼接字符串与逻辑
const element = <p>您好，{userName}，您有 {unreadCount * 2} 条新提醒。</p>;

2. 标签属性传值（Prop Attributes）

为组件或原生 DOM 元素的属性传递动态值时，必须将属性值的值部分用大括号包裹，绝不能在大括号外部添加双引号或单引号：

const avatarUrl = 'https://example.com/avatar.png';
const isButtonDisabled = true;

// 正确写法：大括号外不加引号
const avatar = <img src={avatarUrl} alt="用户头像" />;
const submitBtn = <button disabled={isButtonDisabled}>提交</button>;

// 错误写法：加了引号会被当做纯字符串字面量解析，失去变量求值能力
// <img src="{avatarUrl}" />  <-- 浏览器会把 "{avatarUrl}" 当成真实图片地址！

3. 事件监听处理器绑定（Event Handlers）

绑定用户交互事件（如点击、输入、提交）时，在大括号内传递事件处理函数本身的引用，而不是执行函数：

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

// 传递函数引用
const button = <button onClick={handleClick}>确认</button>;

// 传递内联箭头函数
const deleteBtn = <button onClick={() => handleDelete(item.id)}>删除</button>;

4. 内联样式对象（Style Objects）与“双大括号”解析

初学者常常困惑的“双大括号”并不是 React 创造的新语法。JSX 接收的 style 属性必须是一个 JavaScript 键值对对象：

// 外层大括号：告知 JSX 这里是一个 JavaScript 表达式容器
// 内层大括号：一个标准的 JavaScript 对象字面量
const card = (
  <div style={{ color: '#B96555', fontSize: '16px', marginTop: 12 }}>
    带样式的通知提示
  </div>
);

// 等价于先提取对象，再单层大括号传入：
const cardStyle = { color: '#B96555', fontSize: '16px', marginTop: 12 };
const card2 = <div style={cardStyle}>带样式的通知提示</div>;

二、底层编译原理：为什么大括号只能写表达式？

要透彻理解大括号内能写什么，必须看清 JSX 在打包编译阶段的真实转化过程。浏览器本身并不能直接识别 JSX 标签，Babel 或 SWC 转译器会把 JSX 代码编译为底层的原生 JavaScript 函数调用（React 17+ 采用 _jsx，传统写法为 React.createElement）。

观察下方的编译对应关系：

// 编写的 JSX 源码：
const element = <div id={getId()} className="panel">{count + 1}</div>;

// 编译后的原生 JavaScript：
import { jsx as _jsx } from 'react/jsx-runtime';

const element = _jsx('div', {
  id: getId(),
  className: 'panel',
  children: count + 1,
});

关键的语言约束就在于此：在 JavaScript 语法中，任何传递给函数调用的参数、对象字面量的属性值，都必须是“表达式”。表达式是一段能够在当前上下文中计算并求出一个具体值的代码（Value）。

相反，控制流程语句（如 if (condition) { ... } 或 for (...) { ... }）无法返回一个单值，也不能被放置在函数的参数列表或对象的属性位置中。如果在参数位置写入语句：

// 假设大括号内能写 if 语句，编译后就会变成：
_jsx('div', {
  children: if (count > 0) { '有数据' } // 语法错误！SyntaxError: Unexpected token 'if'
});

这是纯粹的 JavaScript 语法限制，与 React 框架本身的设计并无冲突。

三、表达式 vs 语句：大括号能写什么、不能写什么？

在编写代码时，判断一段逻辑能不能写进大括号，有一个极为实用的经验法则：这段代码能不能直接放在 const result = ... 的等号右侧？ 如果可以，它就是表达式，能安全写进大括号；如果不行，它就是语句，禁止直接写进大括号。

1. 大括号完全支持的 6 类表达式

• 标识符与变量：如 {title}、{user.profile.age}。
• 基本类型字面量与算术运算：如 {'当前版本: ' + 2.0}、{price * discount}。
• 模板字符串：如 {`欢迎您，${user.name}（积分：${points}）`}。
• 三元条件运算符（Ternary Operator）：替代 if/else 的首选方案，如 {isOnline ? <Badge status="online" /> : <Badge status="offline" />}。
• 逻辑与（&&）和逻辑或（||）：用于快捷的条件渲染，如 {isAdmin && <button>删除用户</button>}。
• 函数调用与数组迭代方法：如 {formatCurrency(total)}、{items.map(item => <li key={item.id}>{item.title}</li>)}。因为 Array.prototype.map 会返回一个包含处理结果的新数组，所以属于标准表达式。

2. 大括号禁止直接写入的 4 类语句及对应替代方案

<div>
  {(() => {
    if (status === 'loading') return <Spinner />;
    if (status === 'error') return <Alert message="加载失败" />;
    return <DataView data={data} />;
  })()}
</div>

四、不同数据类型在大括号中的渲染行为

表达式求值后会产生不同类型的 JavaScript 数据。React 会根据值的类型采取截然不同的渲染策略：

1. 字符串与数字（String & Number）

字符串与数字会被正常转换为 DOM 文本节点展示。即使是数字 0，也会被当做有效文本直接输出到界面中。

2. 布尔值、null 与 undefined

在 JSX 中，true、false、null 和 undefined 都是合法的子节点内容，但它们完全不会渲染任何可见内容（静默渲染为空）。React 之所以这样设计，是为了方便开发者利用布尔短路运算符来控制界面展示：

// 当 isMessageShown 为 false 时，表达式计算结果为 false
// React 发现求值是 false，不渲染任何节点，避免了 DOM 树污染
const notice = <div>{isMessageShown && <Alert />}</div>;

如果确实想要在界面上打印布尔值或 null，需要显式调用 String(value) 转换为字符串。

3. 数组（Array）

如果大括号内的表达式求值结果是一个数组，React 会自动扁平化展开数组并依次渲染其中的每一项。这正是 .map() 能够渲染列表的核心原因：

const listItems = ['苹果', '香蕉', '橙子'].map((fruit, index) => (
  <li key={index}>{fruit}</li>
));

// React 会自动展开数组依次输出各个 <li>
return <ul>{listItems}</ul>;

4. 普通对象（Plain Object）

将一个纯 JavaScript 对象直接作为标签的子节点放入大括号中，是 React 开发中最常见的报错来源：

const user = { name: '张三', role: '管理员' };

// 运行时致命报错：
// Uncaught Error: Objects are not valid as a React child (found: object with keys {name, role}).
// If you meant to render a collection of children, use an array instead.
return <div>{user}</div>;

// 正确做法：读取对象内部的具体属性，或者序列化为 JSON 字符串
return (
  <div>
    <span>姓名：{user.name}</span>
    <pre>{JSON.stringify(user, null, 2)}</pre>
  </div>
);

五、大括号使用中的高频踩坑与防御性写法

1. 数字 0 与 逻辑与（&&）渲染陷阱

很多开发者习惯用 length && <Component /> 来做条件判断。但在 JavaScript 中，0 && <div /> 的短路计算结果是数字 0。由于数字在 React 中属于正常文本渲染类型，最终页面上会直接暴露一个突兀的 "0"：

const unreadCount = 0;

// 错误：当 unreadCount 为 0 时，界面上会渲染出数字 "0"
return <div>{unreadCount && <span className="badge">{unreadCount}</span>}</div>;

// 正确方案 1：显式转换为纯布尔值
return <div>{unreadCount > 0 && <span className="badge">{unreadCount}</span>}</div>;

// 正确方案 2：使用 Boolean 构造函数
return <div>{Boolean(unreadCount) && <span className="badge">{unreadCount}</span>}</div>;

// 正确方案 3：使用三元表达式明确返回 null
return <div>{unreadCount > 0 ? <span className="badge">{unreadCount}</span> : null}</div>;

2. 列表 map 中 key 的作用位置

在使用 .map() 遍历返回 JSX 节点时，key 必须直接添加到 map 循环体最外层的顶层标签上，而不是内层标签：

// 正确：key 在最外层的 React.Fragment 或包裹元素上
{items.map(item => (
  <div key={item.id} className="row">
    <span>{item.name}</span>
  </div>
))}

3. 避免大括号内嵌套过深的三元表达式

虽然嵌套三元表达式在语法上完全属于合法表达式，但在 JSX 大括号内部嵌套超过两层三元判断会导致模板结构严重失衡：

// 难以维护的反例：
<div>
  {isLoading ? <Spinner /> : isError ? <Error /> : data.length === 0 ? <Empty /> : <List data={data} />}
</div>

// 规范重构：在 return 之前使用标准 if/else 提前返回，或拆分小组件
if (isLoading) return <Spinner />;
if (isError) return <Error />;
if (data.length === 0) return <Empty />;
return <List data={data} />;

总结

JSX 中的花括号 {} 本质上是声明式 UI 与命令式 JavaScript 之间的桥梁。只要牢记两点核心原则：

1. 内容属性：大括号只能容纳可求值的表达式，语句必须改写为三元表达式、逻辑运算符或数组方法。
2. 渲染契约：基本文本与数组正常输出，布尔与空值静默隐藏，纯对象作为子节点严格禁止直接渲染。

遵循这套规范，即可在 JSX 中自如地编织出结构严谨、逻辑清晰的高性能组件。