react中表格的数据渲染

数据列表渲染

数据列表处理使我们常见的事物类型，到后台给你一串数据列表，你将如何展示在前端页面上呢，传统的我们都是通过循环来实现，那么在react里面我们又是怎样实现的呢？

    数据如下

  

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

    实现一
    我们使用for循环

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

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

        在用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>
        )

    总结
    像这种列表数据的处理，我们一般都采用循环遍历的方式，在传统的前端业务中，我们是将通过ajax请求来的数据通过一个循环来加入到拼接字符串模板中去，然后在加入到前端页面。然而在React中，组件这个核心实现起来让我们的逻辑更清晰，react因为组件的原因，我们可以把每一条数据都抽离为一个独立的组件，然后在通过组件嵌套的原理加入到需要的页面，同时，react的列表数据渲染也把ES6 map数据的遍历功能发挥的很好。我是看了一个课程过来的，课程原文如下：http://huziketang.com/books/react/lesson13
---------------------

最后：
特别感谢原作者：美美王子
原文：https://blog.csdn.net/A_xilixiaogui/article/details/77624029