reactjs遍历数据的方式

第一种方式，使用map方法，用es6的语法进行遍历：

render(){
     const numbers = [1,2,3,4,5]
     return (
            <div>
                {
                   numbers.map((item,index)=>{
                      return (
                          <div key={index}>value：{item}， index：{index}</div>
                       )
                   })
                }
           </div>
     )
}

第二种方式，把遍历map的结果赋值给一个变量，在render中引用

render(){
       const numbers = [1,2,3,4,5]
       const listData = numbers.map((item,index)=>{
          return (
                 <div key={index}>value：{item}， index：{index}</div>
               )
           })
       return (
             <div>
                {listData}
              </div>
       )
}

 

第三种：把获得到的数据push到数组，在render中引用

render(){
    const numbers = [1,2,3,4,5]
    const listData = []; // 声明一个变量，存储遍历的模板数据
    numbers.forEach((item,index)=>{
         listData.push(<div key={index}>value：{item}， index：{index}</div>)
    })
    return (
           <div>
             {listData}
           </div>
     )
}