react基礎之-- 列表迴圈

在jsx語法中，迴圈渲染是利用陣列的遍歷 map() 方法返回一個集合。

遍歷時必須有唯一索引 key 提高遍歷的效率。一個元素的 key 最好是這個元素在列表中擁有的一個獨一無二的字串，萬不得已可以使用 index。

 

import React from 'react'

export default class Home extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
          list: [
            {name:'aa',age:13},
            {name:'bb',age:14},
            {name:'cc',age:15}
          ],
          list2:[
            {name:'撒大大1',age:15},
            {name:'撒大大2',age:18 },
            {name:'撒大大3',age:20}
          ]
        }
      }
      renderList(value, index) {
        return (
          <li key={index}>
            <span>{value.name}</span> --
            <span>{value.age}</span>
          </li>
        )
      }

    render (){
        return (
            <div>
              <ul>
                {this.state.list.map((value, index) => {
                  return (
                    <li key={index}>
                      <span>{value.name}</span> --
                      <span>{value.age}</span>
                    </li>
                  )
                })}
              </ul>

              <ul>
                {this.state.list2.map((value,index)=>{
                  return this.renderList(value,index)
                })}
              </ul>

            </div>
          )
          
    }
}