如果有！JSX 树将由组件返回。您可能已经注意到渲染输出中存在一些重复：
<li className="item">{name} ✔</li> <li className="item">{name}</li>
两个条件分支都返回：<li className="item">...</li>
if (isPacked) { return <li className="item">{name} ✔</li>; } return <li className="item">{name}</li>;
虽然这种重复是无害的，但它可能会使你的代码更难维护。如果要更改 ？你必须在代码中的两个地方执行此操作！在这种情况下，你可以有条件地包含一点 JSX，使你的代码更加 DRY。className
条件（三元）运算符 （? :)
JavaScript 有一个紧凑的语法来编写条件表达式——条件运算符或“三元运算符”。
取而代之的是：
if (isPacked) { return <li className="item">{name} ✔</li>; } return <li className="item">{name}</li>;
你可以这样写：
return ( <li className="item"> {isPacked ? name + ' ✔' : name} </li> );
你可以把它读作“如果 isPacked 是真的，那么 （？）render name + ' ✔ '，否则 （：） render name“。
function Item({ name, isPacked }) { return ( <li className="item"> {isPacked ? ( <del> {name + ' ✔'} </del> ) : ( name )} </li> ); } export default function PackingList() { return ( <section> <h1>Sally Ride's Packing List</h1> <ul> <Item isPacked={true} name="Space suit" /> <Item isPacked={true} name="Helmet with a golden leaf" /> <Item isPacked={false} name="Photo of Tam" /> </ul> </section> ); }
这种风格适用于简单的条件，但要适度使用。如果组件因嵌套条件标记过多而变得混乱，请考虑提取子组件来清理。在 React 中，标记是代码的一部分，因此您可以使用变量和函数等工具来整理复杂的表达式。
