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 或切换语句呢？

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);

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

1 个答案: