Question

在ReactJS中渲染表格之前，我需要知道我的最高组件高度的方法。行和单元格很多，所以我为表创建了虚拟化。问题如下，我只剪切了在表格视口中可见的行和单元格。但是我的单元有来自后端的动态数据。因此在抄写过程中它们会膨胀和收缩。

是否可以在安装之前获得高度？还是在隐藏的组件中渲染每个单元并缓存高度？

Answer 1

如果将行的样式设置为使用状态变量，则可以在CompomentDidMount上设置此变量。像下面这样。

class Foo extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            minHeight: 0,
        };
    }

    componentDidMount() {
        // Or however you get height from a ref
        const fooHeight = this.elementFoo.clientHeight; 
        const barHeight = this.elementBar.clientHeight;
        const minHeight = fooHeight > barHeight ? fooHeight : barHeight;
        this.setState({ minHeight });
    }

    render() {
        const { minHeight} = this.state;

        return (
            <div style={{ 'min-height': `${minHeight}px` }} ref={elm => (this.elementFoo = elm)}>Foo</div>
            <div style={{ 'min-height': `${minHeight}px` }} ref={elm => (this.elementBar = elm)}>Bar</div>


    }
}

Answer 2

如果您需要虚拟表，我建议您不要重新发明轮子，而应该使用react-virtualized之类的东西。

至于仅获取组件的渲染尺寸，react-virtualized也有一个称为CellMeasurer的HOC。

在React js中安装之前先获取组件高度

2 个答案: