列表渲染：

1.使用數組的 map 方法（因為map 可以映射）

2、列表要添加 key 屬性，值要唯一

// 導入
// 用來獲取 dom元素
import { createRoot } from "react-dom/client";

// 內容
const contentArr = [
  { id: 1, name: "唐" },
  { id: 2, name: "宋" },
  { id: 3, name: "元" },
  { id: 4, name: "明" },
  { id: 5, name: "清" },
];

// 標識
const mark = 0;

const root = createRoot(document.querySelector("#root"));

root.render(
  <div>
    <ul>
      {contentArr.map((item) => {
        return <li key={item.id}>{item.name}</li>;
      })}
    </ul>
  </div>
);

不加 key 值會報錯

條件渲染

1、邏輯與 && --場景：當只有一個內容時使用，渲染 or 不渲染
2、三元表達式 ?: --場景： 有兩個內容時，渲染A 或者渲染B

樣式的處理

className + 樣式文件

// 標識
const mark = 3;

const root = createRoot(document.querySelector("#root"));

root.render(
  <div>
    <ul>
      {contentArr.map((item, index) => {
        return (
          <li
            key={item.id}
            className={item.id === mark ? "text" : "initialize"}
          >
            {index === 0 && (
              <img
                className="img-box"
                src="https://p3-passport.byteimg.com/img/user-avatar/35e9831939c32731d1f9a2c2ff23a2ea~100x100.awebp"
                alt=""
              />
            )}
            {item.name}
          </li>
        );
      })}
    </ul>
  </div>
);