React 中 {} 的应用

列表渲染：

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 (<likey={item.id}className={item.id === mark ? "text" : "initialize"}>{index === 0 && (<imgclassName="img-box"src="https://p3-passport.byteimg.com/img/user-avatar/35e9831939c32731d1f9a2c2ff23a2ea~100x100.awebp"alt=""/>)}{item.name}</li>);})}</ul></div>
);