JSX花括号内究竟可写入哪些合法内容？

JSX里的花括号本质是用来嵌入JavaScript表达式的，这一点旧版React文档的描述是准确的。

核心区别：表达式 vs 语句 #

• 表达式：能计算出一个值的代码片段，比如1+2、三元运算符condition ? a : b、函数调用console.log('test')、变量名username都是表达式——它们最终都会返回某个值（哪怕是undefined）。
• 语句：执行某种操作的代码，不直接返回值，比如if/else、for循环、switch这类都是语句，所以不能直接放在JSX的花括号里。

为什么console.log能在花括号里运行？ #

你之前误以为console.log是语句，其实它是函数调用表达式。当你在花括号里写{console.log('hello')}时，这段代码会执行函数调用，输出内容到控制台，同时函数本身返回undefined。React在渲染时会忽略undefined、null、false这类“空值”，所以不会在页面上渲染出任何内容，但函数的执行动作是有效的。

哪些内容可以放进花括号？ #

所有能单独放在return后面的JavaScript代码，都可以放进JSX的花括号里，比如：

• 变量、常量的引用：{userName}
• 算术/逻辑运算：{count + 1}、{isActive && '激活状态'}
• 函数调用：{formatDate(timestamp)}
• 三元运算符：{isLoggedIn ? '欢迎回来' : '请登录'}
• 对象/数组的访问：{user.info.age}、{list[0]}

如果需要用if/else这类语句，你可以把它们移到JSX外面，或者封装成函数再调用，比如：

// 方式1：逻辑放在JSX外
let greeting;
if (isLoggedIn) {
  greeting = '欢迎回来';
} else {
  greeting = '请登录';
}
return <div>{greeting}</div>;

// 方式2：封装成函数
const getGreeting = () => {
  if (isLoggedIn) {
    return '欢迎回来';
  }
  return '请登录';
};
return <div>{getGreeting()}</div>;

内容的提问来源于stack exchange，提问作者Jaden