如何在React中动态计算VariableSizeList中组件的高度？

Question

我使用 React 与 Material-UI 和 React-window 库的 VariableSizeList 组件来渲染动态大小的组件列表。每个组件的高度是在渲染后确定的，因此我需要一种方法来计算和设置 VariableSizeList 中每个组件的高度。

这是我的代码的简化版本：

//@ts-ignore
import React, { useRef, useState, useEffect, useReducer } from 'react';
import { VariableSizeList, ListChildComponentProps } from 'react-window';
import { Box, ListItem, ListItemText } from '@mui/material';

const HistoryList = () => {
    const [statComponentHeights, setStatComponentHeights] = useState<number[]>([]);

    const [ignored, forceUpdate] = useReducer(x => x + 1, 0);
    
    const ListItemComponent = (props: ListChildComponentProps) => {
        const licRef = useRef<HTMLDivElement>(null);

        // Function to calculate and set height when the component loads
        const onLoad = (e: React.SyntheticEvent<HTMLDivElement, Event>) => {
            console.log('Client height', e.currentTarget.clientHeight);
            const newStatComponentHeightsArray = [...statComponentHeights, e.currentTarget.clientHeight];
            setStatComponentHeights(newStatComponentHeightsArray);
        }

        const listItem = (
            <div ref={licRef} style={props.style} onLoad={(e) => onLoad(e)}>
                <ListItem sx={{color:'white'}} key={props.index} component="div" disablePadding>
                    <ListItemText primary={`Item ${props.index}`} />
                </ListItem>
            </div>
        );

        return listItem;
    };

    // Function to return height for each item in VariableSizeList
    const getItemSize = (index: number) => {
        return statComponentHeights[index] ?? 0; // Right now this returns 0
    };

    // Force re-render when data changes
    useEffect(() => {
        // Logic to update state or re-render components when data changes
        forceUpdate();
    }, [statComponentHeights]);

    return (
        <Box>
            <VariableSizeList
                height={400}
                width={300}
                itemSize={getItemSize}
                itemCount={10} // Example itemCount
            >
                {ListItemComponent}
            </VariableSizeList>
        </Box>
    );
};

export default HistoryList;

我的问题是，我需要根据其内容或渲染后决定其高度的其他因素动态计算和设置 VariableSizeList 中每个组件的高度。我尝试在每个 ListItemComponent 内的 div 元素上使用 onLoad 事件，但它无法按预期工作，因为 onLoad 事件不适用于 div 元素。

如果运行上面的代码，您将看到所有十个 listItem 将堆叠在一起，因为 getItemSize() 返回 0，因为 onLoad 不运行。

有没有办法在有或没有 onLoad 事件的情况下实现 VariableSizeList 中组件的动态高度计算？任何建议或替代方法将不胜感激。谢谢！

Answer 1

兄弟，你的问题解决了吗？我也有同样的问题。太难了