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

react的列表渲染

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

react的列表渲染

上一篇:Oracle学习之路-SQL篇-连接查询


下一篇:06 Shrio Authenticator及AuthenticationStrategy