ReactJS 條件渲染 - 否則如果不起作用

Question

我正處於學習 JS 和 React 的階段，我不確定為什么 else if 在下面的代碼中不起作用。 任何人都可以幫助我嗎？

  function Item({ name, isPacked }) {
  if (isPacked) {
    return (
      <li className="item">
        {name} {isPacked && " ✔"}
      </li>
    );
  } else if (!isPacked) {
    return (
      <li className="item">
        {name} {isPacked && " ❌"}
      </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>
  );
}

Answer 1

試試這樣：

function Item({ name, isPacked }) {
    return (
        <li className="item">
            {`${name} ${isPacked ? "✔" : '❌'} `}
        </li>
    );
}

Answer 2

你實際上測試了 isPacked 是真還是假，所以試試這個代碼：

function Item({ name, isPacked }) {
    return (
      <li className="item">
        {name}  {isPacked ? "✔" : "❌" }
      </li>
    );
}

{包裝好了嗎？ "✔": "❌" } 所以這行代碼等於：

  if(isPacked == true){
      return "✔";
    }else{
      return "❌";
    }

您可以在此處獲得一些有用的示例https://reactjs.org/docs/conditional-rendering.html 。