react渲染数组

数据如下

const books = [
  { bookname: '1', time: '一号',},
  { bookname: '2', time: '二号'},
  { bookname: '3', time: '三号'},
  {bookname: '4', time: '四号'}
]

实现一
我们使用for循环

先用一个数组来存放你的数据

const booksElements = [] // 保存每本书渲染以后 JSX 的数组

在用for循环来取出来，再加到我们刚刚定义好的数组里面，然后返回给页面。

for (let book of books) {
     booksElements.push( // 循环每本书，构建 JSX，push 到数组中
       <div>
         <div>书名：{book.bookname}</div>
         <div>出版时间：{book.time}</div>
         <hr />
       </div>
     )
   }

然后直接用表达式插入到页面。

实现二
我们可以使用ES6的map数据结构来遍历列表数据，

{
    books.map((book) => {
          return (
            <div>
              <div>书名：{book.bookname}</div>
              <div>出版时间：{book.time}</div>
              <hr />
            </div>
          )
    })
}

实现三
根据实现二，我们可以把每一个数据的结构抽离出来，形成一个独立的组件

    const { book } = this.props
    return (
      <div>
        <div>书名：{book.bookname}</div>
              <div>出版时间：{book.time}</div>
              <hr />
      </div>
    )

然后在主组件中套如该组件

return (
      <div>
        {books.map((book) => <Book book={book} />)}
      </div>
    )

然后渲染到页面

接下来我们给每一个数据加上key，其实我们在后台获取来的数据都是有一个id的，但是这里我们为了能测试成功，我们就给他一个数，通过循计数i作为key

return (
      <div>
        {books.map((book, i) => <Book key={i} book={book} />)}
      </div>
    )