我有一个需要可变行高的反应数据网格。
<ReactDataGrid
ref={node => this.grid = node}
enableCellSelect
columns={columnDefs}
rowGetter={this.rowGetter(this)}
rowsCount={this.props.table.length}
rowRenderer={RowRenderer}
rowHeight={50}
rowScrollTimeout={200}
minHeight={550}
minColumnWidth={15}
/>
我大部分时间都在使用行渲染器并动态计算行高
class RowRenderer extends React.Component {
setScrollLeft(scrollBy) {
this.refs.row.setScrollLeft(scrollBy);
}
getRowHeight() {
const rowLines = Math.ceil((this.props.row.desc.length + 1) / 150);
return rowLines * 50;
}
render() {
return (
<ReactDataGrid.Row
ref="row"
{...this.props}
height={this.getRowHeight()}
/>
);
}
};
但是,由于虚拟化创建的 div 使用固定的行高,滚动无法正常工作
https://github.com/adazzle/react-data-grid/issues/671
<div class="react-grid-Canvas" style="position: absolute; top: 0px; left: 0px; overflow-x: auto; overflow-y: scroll; width: 1214px; height: 498px;">
<div>
<div style="height: 600px;"> <!-- always increments by 50px, the initial row height -->
我试图找到一种方法来重载处理滚动的函数,但还没有找到方法来做到这一点。有没有办法使滚动过载并设置高度以使其平滑滚动?