列表渲染：

1.使用數(shù)組的 map 方法（因?yàn)閙ap 可以映射）

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

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

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

// 標(biāo)識
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 值會報(bào)錯(cuò)

條件渲染

1、邏輯與 && --場景：當(dāng)只有一個(gè)內(nèi)容時(shí)使用，渲染 or 不渲染
2、三元表達(dá)式 ?: --場景： 有兩個(gè)內(nèi)容時(shí)，渲染A 或者渲染B

樣式的處理

className + 樣式文件

// 標(biāo)識
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>
);