React-data-grid 是否有处理分页的机制？答案

【问题标题】：Does React-data-grid have a mechanism to handle pagination?React-data-grid 是否有处理分页的机制？
【发布时间】：2019-03-01 00:37:39
【问题描述】：

我在分页文档中没有看到任何内容。是否有内置机制，或者我必须自己实现它？

【问题讨论】：

根据我对react-data-grid的了解，需要自己在react数据网格中实现分页。

标签： react-data-grid

【解决方案1】：

这是一个反应数据网格中的分页（无限滚动）示例。我正在使用scrollHeight,scrollTop 和clientHeight 属性来检查是否加载下一页。您需要修改您的API 以支持这种类型的分页。

let columns = [
    {
        key: 'field1',
        name: 'Field1 ',
    },
    {
        key: 'field2',
        name: 'Field2 ',
    },
    {
        key: 'field3',
        name: 'Field3',
    },
]
export default class DataGrid extends React.Component {
    constructor(props) {
        super(props)
        this.state = {height: window.innerHeight - 180 > 300 ? window.innerHeight - 180 : 300,page:1}
        this.rowGetter = this.rowGetter.bind(this)
        this.scrollListener = () => {
            if (
                (this.canvas.clientHeight +
                    this.canvas.scrollTop) >= this.canvas.scrollHeight) {
                        if (this.props.data.next !== null) {
                            let query = {}
                            let newpage = this.state.page +1
                            query['page'] = newpage
                            this.setState({'page':newpage})
                            this.props.dispatch(fetchData(query)).then(
                                (res) => {
                                    // make handling
                                },
                                (err) => {
                                    //  make handleing
                                }
                            )
                        }
            }
        };
        this.canvas = null;
    }
    componentDidMount() {
        this.props.dispatch(fetchData({'page':this.state.page}))
        this.canvas = findDOMNode(this).querySelector('.react-grid-Canvas');
        this.canvas.addEventListener('scroll', this.scrollListener);
        this._mounted = true
    }
    componentWillUnmount() {
        if(this.canvas) {
            this.canvas.removeEventListener('scroll', this.scrollListener);
        }
    }
    getRows() {
        return this.props.data.rows;
    }

    getSize() {
        return this.getRows().length;
    }
    rowGetter(rowIndex) {
        let rows = this.getRows();
        let _row = rows[rowIndex]
        return _row
    }
    render() {
        return (
                    <ReactDataGrid columns={columns}
                        rowGetter={this.rowGetter}
                        rowsCount={this.getSize()}
                        headerRowHeight={40}
                        minHeight={this.state.height}
                        rowHeight={40}
                    />

        )
    }
}

注意：假设数据取自 redux 存储

【讨论】：