React.js 的分页示例答案

【问题标题】：Pagination Example with React.jsReact.js 的分页示例
【发布时间】：2016-04-27 14:08:38
【问题描述】：

我需要使用 React.js 在我的数据网格项目中使用分页。

我使用固定数据表，我需要知道使用 ES5 进行分页的最佳方式是什么。（尤其是 ES5）

这里是固定数据表链接：

https://facebook.github.io/fixed-data-table/

你能在 React.js（使用 ES5）中展示任何分页示例吗？或者我该怎么做？

【问题讨论】：

标签： javascript jquery reactjs fixed-data-table

【解决方案1】：

您将需要创建一个处理分页状态的反应组件，然后一次将一页传递给呈现表格的子组件。

var Paginate = React.createClass({

  getInitialState: function() {
    this.setState({
      currentPage: this.props.currentPage || 0,
      allRows: this.props.rows,
      pageSize: this.props.pageSize || 5
    });
  },

  getThisPage: function() {
    let start = (this.state.currentPage * this.state.pageSize) - this.state.pageSize;
    return this.state.allRows.slice(start, start + this.state.pageSize);
  },

  prevPage: function() {
    let nextPage = this.state.currentPage - 1;

    if (nextPage > 0) return;

    this.setState(Object.assign(this.state, { currentPage: nextPage }));
  },

  nextPage: function() {
    let nextPage = this.state.currentPage + 1;

    if (nextPage > this.sate.allRows / this.state.pageSize) return;

    this.setState(Object.assign(this.state, { currentPage: nextPage }));
  },

  render: function() {
    var _this = this;
    const childrenWithProps = React.Children.map(this.props.children, function(child){
      return React.cloneElement(child, {
        rows: _this.getThisPage()
      });
    });

    return (<div>
      {childrenWithProps}
      <button onClick={this.prevPage}>previous</button>
      <button onClick={this.nextPage}>next</button>
    </div>);

  }
});

var Table = function({ rows }) {
  return (<Table
    rowHeight={50}
    rowsCount={rows.length}
    width={5000}
    height={5000}
    headerHeight={50}>
    <Column
      header={<Cell>Col 1</Cell>}
      cell={<Cell>Column 1 static content</Cell>}
      width={2000}
    />
    <Column
      header={<Cell>Col 2</Cell>}
      cell={<MyCustomCell mySpecialProp="column2" />}
      width={1000}
    />
    <Column
      header={<Cell>Col 3</Cell>}
      cell={({rowIndex, ...props}) => (
        <Cell {...props}>
          Data for column 3: {rows[rowIndex][2]}
        </Cell>
      )}
      width={2000}
    />
  </Table>);
});

ReactDOM.render(<Paginate rows={rows}><Table /></Paginate>,
  document.getElementById('example'));

【讨论】：

【解决方案2】：

您可以在构建链中使用babel 来编写 ES6 并将其转译为 ES5，但直接翻译基本示例会为您提供：

var React = require('react');
var ReactDOM = require('react-dom');
var Table = require('fixed-data-table').Table;
var Column = require('fixed-data-table').Column;
var Cell = require('fixed-data-table').Cell;

// Table data as a list of array.
var rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3'],
  // .... and more
];

// The remaining is the same as usual.

【讨论】：

【解决方案3】：

是的，前段时间我在寻找类似的东西，发现this great 的文章有完整的例子，在React 中使用FixedDataTable 和服务器端渲染。

【讨论】：

【解决方案4】：

我为此目的创建了一个组件here。安装它：

npm install pagination-component --save

它可以与 JS 库中的 CSS 一起使用（在 ES5 中）（不是必需的）。示例：

var React = require('react');
var render = require('react-dom').render;
var Pagination = require('pagination-component');
var css = require('glamor').css;

var pageLink = css({
  margin: '2px',
  display: 'inline-block',
  padding: '2px',
  WebkitBorderRadius: '20px',
  MozBorderRadius: '20px',
  borderRadius: '20px'
});

var currentLink = css({
  backgroundColor: '#0074c2',
  display: 'inline-block',
  color: '#FFFFFF'
});

var Example = React.createClass({
  render() {
    return <div>
      <h1>react-paginator Demo</h1>
      <Pagination currentPage={0}
                  pageCount={50}
                  pageLinkClassName={pageLink}
                  currentLinkClassName={currentLink}
                  onPageClick={i => {
                    console.log(`Link to page ${i} was clicked.`);
                  }} />
    </div>;
  }
})

更多使用说明请见here。

【讨论】：