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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐