ReactJS中的三元算子混淆

我是ReactJS新手，一直在通过在线课程学习。为什么我可以在JSX表达式中使用三元运算符而不是if语句？

根据

JSX只是为React.createElementcomponent、props、…children函数提供语法上的支持

ReactDOM.render(<div id="message">Hello Darren!</div>, mountNode);

所以如果我们试着把if放到jsx中

这就是为什么使用三元

ReactDOM.render(<div id={condition ? 'message' : null}>Hello Darren!</div>, mountNode);

---

如果jsx是一个表达式，也就是说，如果它解析为一个特定的值，就会在jsx中呈现一些javascript。独立的if是一个javascript控制语句，但不是一个表达式，它本身不会解析为值

因此，要在jsx中使用它，它需要以某种方式为一个更大的表达式做出贡献——例如，它可能会确定一个立即调用的函数表达式iife的输出，该表达式可以解析为返回一个值。例如：

<p>
{(() => {
   if(something)
      return "some text"
   else
      return "some other text"
})()}
</p>

这里有一个不太糟糕的解释

React.createElement("div", {id: if (condition) { 'message' }}, "Hello Darren!");

ReactDOM.render(<div id={condition ? 'message' : null}>Hello Darren!</div>, mountNode);

<p>
{(() => {
   if(something)
      return "some text"
   else
      return "some other text"
})()}
</p>