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) {
              ( // 循环每本书，构建 JSX，push 到数组中
                <div>
                  <div>书名：{}</div>
                  <div>出版时间：{}</div>
                  <hr />
                </div>
              )
            }

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

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

{((book) => {
              return (
                <div>
                  <div>书名：{}</div>
                  <div>出版时间：{}</div>
                  <hr />
                </div>
              )
            })}

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

 const { book } = 
        return (
          <div>
            <div>书名：{}</div>
                  <div>出版时间：{}</div>
                  <hr />
          </div>
);

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

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

然后渲染到页面

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

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

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

最后：
特别感谢原作者：美美王子
原文：/A_xilixiaogui/article/details/77624029

秒客网

react中表格的数据渲染

相关文章