5

我已经完成了根据我的实时可调整大小容器更改 pageSize:在我更改页面之前它运行良好。

一旦我改变页面,如果我降低容器的高度,表格的高度不能低于我改变页面时的高度。

换句话说,当我更改页面时(例如从第 1 页到第 2 页),假设高度为 360px,约 12 行,如果我更高,则 360px 行会顺利“添加”,但是当我低于 360px 时,桌子的高度不再改变。

注意:在更改页面之前,一切正常。

在此处输入图像描述

export default class Table extends React.Component {

  constructor() {
    ...
  }

  componentWillReceiveProps(newProps) {
    if (this.props.y != newProps.y) {
      // size row
      let rowHeight = 32.88;
      // size resizable panel
      let panelHeight = newProps.y;
      // size of the extra y of the table (header + footer)
      let extraTable = 27 + (this.props.x < 650 ? 75 : 45);
      // setting pageSize of the table
      this.setState({pageSize: parseInt((panelHeight - extraTable) / rowHeight)});
    }
  }

  render() {
    return (
      <ReactTable
        data={this.props.data}
        columns={this.props.columns}
        pageSize={this.state.pageSize} 
      />
    )
  }
}

在 Github 上有人告诉我这是一个实现问题,但我觉得它可以解决。有谁知道如何做到这一点?

4

1 回答 1

8

通过使用defaultPageSize而不是pageSize解决,并改变组件的key强制重新渲染(基于pageSize本身):

render() {
    return (
      <ReactTable
        key={this.state.pageSize}
        data={this.data}
        columns={this.columns}
        defaultPageSize={this.state.pageSize} 
        showPageSizeOptions={false}
      />
    )
  }
于 2017-10-16T16:20:04.617 回答