JSX 有条件地包括

如果有！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 中，标记是代码的一部分，因此您可以使用变量和函数等工具来整理复杂的表达式。