条件渲染

React 没有特殊的条件语法，使用普通的 JavaScript 条件语句。

方式一：if 语句

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}

return <div>{content}</div>;

方式二：三元运算符（推荐）

<div>{isLoggedIn ? <AdminPanel /> : <LoginForm />}</div>

方式三：逻辑与 &&（无 else 分支时）

<div>{isLoggedIn && <AdminPanel />}</div>

---

列表渲染

使用 JavaScript 的 map() 函数渲染列表：

const products = [
  { title: "卷心菜", isFruit: false, id: 1 },
  { title: "大蒜", isFruit: false, id: 2 },
  { title: "苹果", isFruit: true, id: 3 },
];

export default function ShoppingList() {
  const listItems = products.map((product) => (
    <li
      key={product.id}
      style={{
        color: product.isFruit ? "magenta" : "darkgreen",
      }}
    >
      {product.title}
    </li>
  ));

  return <ul>{listItems}</ul>;
}

重要：每个列表项都需要唯一的 key 属性，帮助 React 识别哪些项目发生了变化。

---