React Virtualized CellMeasurer with List 间歇性地给出随机高度答案

【问题标题】：React Virtualized CellMeasurer with List gives random height intermittentlyReact Virtualized CellMeasurer with List 间歇性地给出随机高度
【发布时间】：2021-06-20 13:18:41
【问题描述】：

我面临react-virtualized 的问题，当我尝试渲染List 和CellMeasurer 具有动态高度的项目并且我滚动列表时，高度被间歇性地错误计算（有时它们被正确测量，有时它会被错误地测量）。有时很少有项目占据列表中第一个项目的高度。当第一项的高度大于另一项时，我会看到元素之间有额外的空白，而当高度较小时，它们开始相互重叠。

添加一些我正在尝试实现的简单示例代码。任何帮助将不胜感激！

const Component = (props) => {

  const rowCacheRef = useRef(
    new CellMeasurerCache({
      fixedWidth: true,
      defaultHeight: DEFAULT_ROW_HEIGHT,
      keyMapper: (rowIndex: number): string => decoratedItemsRef.current[rowIndex]?.key,
      ...cellMeasurerProps,
    })
  );


  const rowRenderer = ({ index, key, style: _rowStyles, parent }) => {
      const decoratedItem = decoratedItemsRef.current?.[index];
      return (
        <CellMeasurer key={key} cache={rowCacheRef.current} parent={parent} columnIndex={0} rowIndex={index}>
          {({ measure }): React.ReactElement | null => (
            <div key={key} style={_rowStyles}>
              <MyComponent />
            </div>
          )}
        </CellMeasurer>
      );
    };

  return (
    <List
      ref={listRef}
      height={height}
      width={width}
      autoHeight={autoHeight}
      scrollTop={scrollTop}
      isScrolling={isScrolling}
      rowCount={decoratedItemsRef.current.length}
      rowHeight={_rowHeight}
      rowRenderer={rowRenderer}
      deferredMeasurementCache={rowCache}
      onScroll={_onScroll}
      containerStyle={containerStyle}
      style={style}
      tabIndex={tabIndex}
      overscanRowCount={overscanRowCount}
    />
  );
}

const MainComponent = () => {
  return (
    <WindowScroller scrollElement={scrollElement}>
      {({ height, isScrolling, onChildScroll, scrollTop }): React.ReactElement => (
        <AutoSizer disableHeight>
          {({ width }): React.ReactElement =>
            <Component 
              width={width},
              height={height}
              scrollTop={scrollTop},
              isScrolling={isScrolling},
              autoHeight
            />
           }
          </AutoSizer>
        )}
      </WindowScroller>
      );
    }

【问题讨论】：

标签： css reactjs react-virtualized

【解决方案1】：

我遇到了类似的问题，我通过确保在行内容完全加载后调用 measure 方法来修复它。

<CellMeasurer
cache={this._cache}
columnIndex={0}
key={dataKey}
parent={parent}
rowIndex={rowIndex}>
{({measure, registerChild}) => (
    <Detalles rowData={rowData} color={color} measure={measure}/>
)}
</CellMeasurer>

function Detalles(props) {
return (
    <div
    className={styles.tableColumn}
    style={{
        display: "flex",
        flexDirection: "column",
        backgroundColor: props.color
    }}>
    {
        props.rowData.detalles.map((q) => {                    
            return <div>{q}</div>
        })
    }
    </div>
);
useEffect(() => {   
    props.measure();
});
}

【讨论】：