渲染一组数据,使用数组的map()方法
map 遍历谁,就给谁添加key属性
//导入react
import React from "react";
import ReactDOM from "react-dom";
const food = [
{
id: 1,
name: "apple"
},
{
id: 2,
name: "melon"
},
{
id: 3,
name: "berry"
}
]
//map 表示遍历
//map 遍历谁,就给谁添加key属性,此处遍历<li>
const list = (
<ul>
{food.map(
item => <li key={item.id}>{item.name}</li>
)}
</ul>
)
// 渲染react
//参数1:要渲染的元素 参数2:要渲染到哪里去(挂载点)
ReactDOM.render(list, document.getElementById("root"));
效果