ReactJS中的三元运算符混乱

Question

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

Answer 1

<React.Fragment>
  {test ? <ElementA /> : <ElementB />}
</React.Fragment>

等效于：

<React.Fragment>
  {(()=>{
    if(test)
      return <ElementA />;
    else
      return <ElementB />;
  })()}
</React.Fragment>

三元运算符会自动返回结果，但if / else语句则不会。

因此，如果要使用if / else语句，则必须将其包装在函数中并返回结果。您还需要调用该函数，因此可以使用IIFE来实现。

Answer 2

根据React documentation。

JSX只是为React.createElement(component, props, ...children)函数提供了语法糖。

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

它将被转换为此。

ReactDOM.render(React.createElement("div", {id:"message"}, "Hello Darren!"), mountNode);

因此，如果我们尝试将if放入jsx。

<div id={if (condition) { 'message' }}>Hello Darren!</div>

它将在jsx中出现。

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

这就是为什么使用三元数的原因。

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

Answer 3

如果是 expression ，也就是说，如果解析为特定值，则将在jsx中呈现一些javascript。独立的UITableView是javascript控件 statement ，而不是 expression ，它本身不能解析为值。

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

if

这里对differences between expressions and statements in javascript

的解释不是很糟糕