1. 程式人生 > 其它 >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>
    )
  }