条件渲染语法

{ If判断 }
function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✔</li>;
  }
  return <li className="item">{name}</li>;
}

{ 三元判断 }
<li className="item">
  {isPacked ? (
    <del>
      {name + ' ✔'}
    </del>
  ) : (
    name
  )}
</li>

{ 逻辑与运算符 (&&) }
<li className="item">  
    {name} {isPacked && '✔'}  
</li>

{ 有官网推荐 }
function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = name + " ✔";
  }
  return (
    <li className="item">
      {itemContent}
    </li>
  );
}

使用 null 有条件地不返回任何内容