笔记｜React - 7 - 有条件的渲染

☁️ 开场

开发时，画面往往需要根据情境来呈现，在 React 我们可以运用 JavaScript 去撰写逻辑，判断在什么样的条件下，要渲染哪个 JSX！

这篇笔记主要整理自：官方文件 Conditional Rendering
示範情境同官方文件：我们要製作一个打包清单，确认打包的会出现一个小打勾，还没打包的就没有

function Item({ name, isPacked }) {  return <li className="item">{name}</li>;}export default function PackingList() {  return (    <section>      <h1>Packing List</h1>      <ul>        <Item           isPacked={true}           name="Hat"         />        <Item           isPacked={false}           name="Phone"         />      </ul>    </section>  );}