react JXL的列表渲染

渲染一组数据,使用数组的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"));

效果