为什么 JSX 中只能使用表达式，而不能使用语句？

在继续之前，我应该提到的是，是的，我已经阅读了“在 React JSX 中使用 if 语句 https://stackoverflow.com/questions/46156968/use-if-statement-in-react-jsx" 及其在 SO 和其他地方的不同变体。

然而，这些帖子更多的是关于how无需在 JSX 中使用语句即可解决问题。我想知道whyJSX 中不允许使用语句，我找不到任何关于 JSX 的帖子。

我正在阅读关于此的官方文档“JSX 中的 If-Else https://react-cn.github.io/react/tips/if-else-in-JSX.html“，给出的原因是，引用，

JSX 只是函数调用和对象构造的语法糖

他们继续对比以下两段代码，第一段有效，第二段无效：

这是有效的：

// This JSX: 
ReactDOM.render(<div id="msg">Hello World!</div>, mountNode);
// Is transformed to this JS: 
ReactDOM.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode); 

这是无效的：

// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

我真的很想了解这一点。首先，在第二个例子中，我绝不会想到在idHTML 元素的属性。事实上，这是我第一次看到 id 属性中使用任何类型的代码。如果我尝试编写 if 条件，我只需在渲染返回表达式中用大括号括起来即可，作为其他可用 JS（如映射或三元表达式）的简单模拟。

render() {
return (
  {if ...
}
)

我毫不怀疑，本文档的作者非常清楚，这个有点非正统的示例解释了他们的断言“JSX 只是函数调用和对象构造的语法糖”，但我不知道如何解释。

让我们从概念上开始。语句与表达式的定义是什么？

一个声明可以做一些事情。表达式计算出一个值。

JSX 旨在构建并从一段代码传递到另一段代码，最终以 HTML 形式结束。这个名字甚至暗示了这种“JavaScript 到 XML”的转换。

它的重点是返回 HTML 节点的“值”。 JSX 允许使用表达式，因为它们可以帮助您确定值。

也许仔细研究三元表达式和 if/else 之间的区别会有所帮助。

If/Else

if(isSaturday){
   wakeUpHour = 10;
}else{
   wakeUpHour = 7;
}

Ternary

wakeUpHour = isSaturday ? 10 : 7;

两者都完成同样的事情，对吧？但在幕后，他们的运作方式有所不同。在英语中，if/else 可能是这样的：

1. 如果 'isSaturday' 的值为 true，则运行大括号内的代码
2. 将数字 10 分配给“wakeUpHour”
3. 否则，运行下一个大括号内的代码
4. 将数字 7 分配给“wakeUpHour”

三元语句也有两部分：

1. 如果 isSaturday 为真，则值为 10。否则值为 7。
2. 将此值分配给“wakeUpHour”

我们认为这些都完成了同样的事情。这里的关键点是三元表达式本身只是一个值。这不是几行代码。到做一点事该值需要另一部分，对其进行赋值。

在 JSX 中，我们不想分配东西。我们想要价值观。因此，我们只采用三元表达式（一个值），而不是赋值部分或任何其他代码语句。

最后，希望不要增加您的困惑，我要指出的是，您can在 JSX 中定义函数。

const myJSX = <button onClick={ () => { return 'hello'; } }>Say hello</button>

等等，什么？我以为我们无法执行代码行。它不是执行代码行，而是定义它们；它被渲染为：

var myJSX = React.createElement("button", {onClick: () => {
  return 'hello';
}}, "Say hello");

将其与尝试仅放入 if/else 语句进行比较：

const myJSX = <span>{ if(true){ return 'hello'; } }</span>

它会尝试渲染为：

var myJSX = React.createElement("span", null, if(true){ return 'hello' });

这是行不通的，出于同样的原因，您通常无法将未封装的代码块传递到函数的参数中。