получение высоты компонентов перед монтажом в React js

Question

Мне нужен способ узнать максимальную высоту компонентов перед рендерингом таблицы в ReactJS.там много строк и ячеек, поэтому я создал виртуализацию для своей таблицы.Проблема заключается в следующем, я вырезал только видимые в таблице области просмотра строк и ячеек.Но мои ячейки имеют динамические данные из бэкэнда.Поэтому во время прокрутки они расширяются и сжимаются.

Есть ли способ получить высоту до монтажа?или рендеринг каждой ячейки в скрытом компоненте и кеширование высоты?

Answer 1

Если вам требуется виртуализированная таблица, я бы порекомендовал не изобретать велосипед и не использовать что-то вроде реагирует на виртуализацию .

Что касается простого получения визуализированных размеров компонента, реагируйте наВиртуализированный также имеет HOC, который вы можете использовать под названием CellMeasurer .

Answer 2

Если вы установите стиль вашей строки для использования переменной состояния, вы можете установить эту переменную в 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>


    }
}