我已经根据我的实时可调整大小的容器更改了 pageSize:在我更改页面之前它运行良好。
一旦我改变页面,如果我减少容器的高度,表格的高度就不能低于我改变页面时的高度。
换句话说,当我更改页面(例如从第 1 页到第 2 页)时,假设高度为 360px,大约 12 行,如果我走得更高,360px 行会顺利“添加”,但是当我去在360px以下, table 的高度不再改变。
注意:在更改页面之前,一切都会顺利进行。
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 上有人告诉我这是一个实现问题,但我觉得这可以解决。有人知道如何做到这一点吗?
最佳答案
通过使用defaultPageSize代替pageSize,并更改组件的key强制重新渲染(基于pageSize本身)来解决:
render() {
return (
<ReactTable
key={this.state.pageSize}
data={this.data}
columns={this.columns}
defaultPageSize={this.state.pageSize}
showPageSizeOptions={false}
/>
)
}
关于reactjs - react 表 : changing pageSize based on container height #552,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46759715/