React学习笔记（3）—循环渲染组件

项目中经常遇到拿到一个数组数据，用来循环渲染在html模板中的场景。比如我有以下的数据：

export default[
    {
        link:"/",
        label:"首页",
        subMenu:[]
    },
    {
        link:"/stateProp",
        label:"stateProp",
        subMenu:[]
    },
    {
        link:"/lifecycle",
        label:"lifecycle",
        subMenu:[]
    }

]

然后我们拿到这个数据，赋值给menuList

import menuList from "./menuList"

开始渲染

 {menuList.map((item, index) => {
       return <MenuItem key={index}>
         <NavLink
           to={item.link}
           onClick={this
           .navClick
           .bind(this, index)}>{item.label}</NavLink>
       </MenuItem>
     })
}

这样就可以根据数据的长度拿到多个 。