1. 放在标签之间（渲染内容）
用于在页面上展示动态的文本或嵌套的组件。
| 用法 | 示例 | 说明 |
|---|---|---|
| 放变量 | <h1>{userName}</h1> |
直接渲染变量值 |
| 放表达式 | <p>{100 + 50}</p> |
先计算表达式，再渲染结果 |
| 放函数调用 | <span>{getFullName()}</span> |
渲染函数的返回值 |
| 放条件判断 | <div>{isLoggedIn ? '欢迎' : '请登录'}</div> |
使用三元运算符或 && |
| 放数组（列表渲染） | <ul>{list.map(item => <li>{item.name}</li>)}</ul> |
遍历数组生成列表 |
2. 放在标签属性中（动态传值）
用于动态给组件或 HTML 标签传递属性（除了字符串字面量，其他都必须用大括号）。
- 动态绑定变量 ：
<img src={userAvatar} /> - 动态绑定布尔值 ：
<button disabled={isSubmitting}>提交</button> - 动态绑定事件 ：
<button onClick={handleClick}>点击</button> - 动态绑定对象（内联样式） ：
<div style={``{ color: 'red' }}>文本</div>（注意这里是双大括号） - 传递子组件 ：
<Layout header={<Header />} />
3. 作为对象字面量的一部分
当属性需要接收一个对象时，外层 {} 表示这是 JS 代码，内层 {} 表示这是一个 JS 对象。
- 内联样式 ：
<div style={``{ fontSize: '16px', marginTop: '10px' }} /> - 传递复杂配置 ：
<Chart data={``{ labels: ['A', 'B'], values: [1, 2] }} />
二、使用误区
大括号里只能放能「算出一个结果」的表达式，不能放用来控制流程的语句。
- ❌ 不能放
if...else：{if (a > b) return '大'}（错误！） - ❌ 不能放
for/while循环：{for(let i=0; i<10; i++) {}}（错误！） - ❌ 不能放变量声明
var/let/const：{const a = 1}（错误！）