ReactTable：根据容器高度＃552更改pageSize

Question

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

更改页面后，如果我减小了容器的高度，则表格的高度不能低于我更改页面时的高度。

换句话说，当我更改页面时（例如，从第1页到第2页），让我们说高度是360px，大约12行，如果我更高，则360px行是＆＃34;添加＆ ＃34;顺利，但当我在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上，有人告诉我这是一个实施问题，但我觉得这可能是一个解决方法。有人知道怎么做吗？

Answer 1

使用defaultPageSize而不是pageSize解决，并更改组件的键以强制重新呈现（基于pageSize本身）：

render() {
    return (
      <ReactTable
        key={this.state.pageSize}
        data={this.data}
        columns={this.columns}
        defaultPageSize={this.state.pageSize} 
        showPageSizeOptions={false}
      />
    )
  }