列表渲染#
使用 map 进行循环,循环哪个结构就 return 哪个结构。
注意：需要给循环体绑定 key 属性。key属性的作用用于React内部,提升更新性能,它的值可以是字符串或数字,但必须唯一。
1const list = [
2 {
3 id: 1,
4 name: "vue",
5 },
6 {
7 id: 2,
8 name: "react",
9 },
10 {
11 id: 3,
12 name: "angular",
13 },
14];
15
16export default function App() {
17 return (
18 <>
19 <h1>Hello JSX!</h1>
20 <ul>
21 {list.map((item, index) => {
22 return <li key={index}>{item.name}</li>;
23 })}
24 </ul>
25 </>
26 );
27}目录