react的列表渲染

因为做了几次了,然后都忘了列表渲染具体怎么写的了,所以自己写一个随笔记录一下,加深一下记忆。
react的列表渲染,就是在你有一个数组数据需要对它进行遍历单个组件并进行赋值的过程。示例:

  1. 对普通标签的列表渲染。
  render() {
    let listData = [1, 2, 3, 4]
    return (
      <div>
        <ul>
          {
            listData.map((item, index) => {
              return <li key={index}>{item}</li>
            })
          }
        </ul>
      </div>
    )
  }

  1. 对组件标签的列表渲染。
  render() {
    const {todos} = this.props
    return (
      <div>
        <ul>
          {
            todos.map(item => {
              return <li key={item.id}>
                     <TodoItem {...item}
                     delet={this.props.delet}
                     changeDone={this.props.changeDone} /> </li>
            })
          }
        </ul>
      </div>
    )
  }

posted @ 2021-11-01 12:21  卿六  阅读(191)  评论(0编辑  收藏  举报