8. JavaScript 在 JSX 中

花括号：通往 JavaScript 的窗口

JSX 是 JavaScript 的语法扩展。花括号 {} 让你”回到”JavaScript 的世界。

const name = 'React';

<h1>Hello, {name}</h1>
// 渲染为：<h1>Hello, React</h1>

{} 里可以是任何有效的 JavaScript 表达式：变量、计算、函数调用、三元运算……

两种使用场景

花括号在 JSX 里只能出现在两个位置：

1. 标签内的文本内容

<h1>{user.name}</h1>
<p>{1 + 1}</p>
<span>{formatDate(new Date())}</span>

2. 紧跟 = 后面的属性值

<img src={user.avatarUrl} />
<div className={isActive ? 'active' : ''} />
<input maxLength={10} />

引号 vs 花括号

这两种写法完全不同：

// 引号：传入字符串 "avatar"
<img className="avatar" />

// 花括号：读取变量 avatar 的值
<img src={avatar} />

className="avatar" 传入的是字符串 "avatar"。 src={avatar} 读取的是变量 avatar 的值。

嵌入复杂表达式

{} 里可以放任何表达式：

const user = {
  firstName: '张',
  lastName: '三',
  imageUrl: 'https://example.com/zhangsan.jpg',
};

// 字符串拼接
<h1>{user.firstName + user.lastName}</h1>

// 模板字符串
<h1>{`${user.lastName}${user.firstName}`}</h1>

// 函数调用
<p>{formatDate(new Date())}</p>

// 三元运算
<span>{isLoggedIn ? '已登录' : '未登录'}</span>

双大括号：对象字面量

JSX 里传递对象时，会出现 {{ 和 }}：

<div style={{ color: 'red', fontSize: '14px' }}>

这不是什么特殊语法。拆解来看：

• 外层 {}：JSX 的 JavaScript 表达式标记
• 内层 {}：JavaScript 对象字面量

等价于：

const styleObj = { color: 'red', fontSize: '14px' };
<div style={styleObj}>

内联样式

style 属性接收一个对象，CSS 属性名用驼峰：

// HTML 写法
<div style="color: red; font-size: 14px">

// JSX 写法
<div style={{ color: 'red', fontSize: '14px' }}>

CSS	JSX
background-color	backgroundColor
font-size	fontSize
border-radius	borderRadius
z-index	zIndex

不能放什么

{} 里只能放表达式，不能放语句：

// 错误：if 是语句，不是表达式
<div>{if (isLoggedIn) { return '已登录' }}</div>

// 错误：for 是语句
<div>{for (let i = 0; i < 10; i++) { ... }}</div>

// 正确：用三元表达式
<div>{isLoggedIn ? '已登录' : '未登录'}</div>

// 正确：在外部计算，再嵌入结果
<div>{result}</div>

简单区分：表达式能产生值，语句执行操作。if、for、switch 是语句；1+1、fn()、a ? b : c 是表达式。

嵌入列表

数组可以直接嵌入，React 会按顺序渲染：

const list = [<li>苹果</li>, <li>香蕉</li>, <li>橙子</li>];

<ul>{list}</ul>

实际开发中，通常用 map() 把数据数组转成 JSX 数组（下一节会详细讲）。

动手试试

在 App.jsx 里试试：

function App() {
  const name = 'React';
  const age = 12;
  const theme = {
    color: 'white',
    backgroundColor: '#282c34',
    padding: '20px',
  };

  return (
    <div style={theme}>
      <h1>Hello, {name}</h1>
      <p>React 已经 {age} 岁了</p>
      <p>明年它 {age + 1} 岁</p>
    </div>
  );
}

export default App;

本节小结

• {} 里放任何 JavaScript 表达式
• 两个位置：标签内文本、= 后的属性值
• 引号传字符串，花括号读变量
• {{}} 是对象字面式，常用于 style
• 不能放 if、for 等语句

下一节学组件的导入导出。