Question

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

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

这是固定数据表链接：

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

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

Answer 1

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

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'));

Answer 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.

Answer 3

是的，前段时间我正在寻找类似的内容，并找到this great文章，其中包含FixedDataTable React与服务器端呈现的完整示例

Answer 4

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

npm install pagination-component --save

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

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。

使用React.js的分页示例

4 个答案: