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}
          ],
          numbers : [1,2,3,4,5]
        }

      }
      renderList(value, index) {
        return (
          <li key={index}>
            <span>{value.name}</span> --
            <span>{value.age}</span>
          </li>
        )
      }

      numbersList(numbers){
        const listItems = numbers.map((value,index) =>
          <li  key={index}>{value}</li>
        );
        return (
          <ul>{listItems}</ul>
        );
      }

    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>
              
              { this.numbersList(this.state.numbers) }
              
            </div>
          )

    }
}