为什么三元运算符在 React JSX 中不起作用而其他人不起作用

Question

return (
        <li className="blog-page__item"
            key={i}>
            {(itemName === 'Small') ? <Smallitem data={item}/> : null}
            {(itemName === 'Middle')  ? <MiddleItem data={item}/> : null}
            {(itemName === 'Big')    ? <BigItem data={item}/> : null}
        </li>
      )

为什么这段代码有效，但如果我使用 if 或 switch 语句，它就不起作用？

Answer 1

您可以阅读 DOCS

if-else 语句在 JSX 中不起作用。这是因为 JSX 只是 用于函数调用和对象构造的语法糖。拿着这个 基本示例：

 // This JSX: ReactDOM.render(<div id="msg">Hello World!</div>,
 mountNode);

// Is transformed to this JS:
ReactDOM.render(React.createElement("div", {id:"msg"}, "HelloWorld!"), mountNode); This means that if statements don't fit in. Take

此示例：

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

这不是有效的 JS。你 可能想使用三元表达式：

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