其他分享
首页 > 其他分享> > react的列表渲染

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>
    )
  }

标签:return,render,渲染,listData,列表,react,item
来源: https://www.cnblogs.com/taosifan/p/15492952.html