1

我正在使用 React Virtualized 来打开我的项目列表，它具有以下功能 1）单击任何项​​目，用户将被提示一个详细信息面板，他将能够在其中更新项目的详细信息。而当他返回列表时，他将能够在列表中的项目单元格中看到详细信息。他可以添加很多细节以使其更大或通过删除细节来减小尺寸

2) 他可以删除该项目，或者在列表中添加具有某些详细信息或没有详细信息的另一个项目。

CellMeasurer 满足我的要求，因为支持动态高度。但我有以下问题

1）最初当我的列表第一次安装时，前几个项目被测量并正确显示，但是一旦我滚动到最后，项目就会相互重叠。（定位不正确，我猜 defaultHeight 正在应用到未测量的细胞）。再次重新呈现列表后，这将正常工作。2）此外，当我更新项目的详细信息时，列表不会随着新的高度调整而更新

我确信我的实现在某个地方是不正确的，但我花了很多时间来敲定它。请让我知道在这里可以做些什么来解决这个问题

ItemView = props => {
        const {index, isScrolling, key, style} = props,
            items = this.getFormattedItems()[index]
        return (
            <CellMeasurer
                cache={this._cache}
                columnIndex={0}
                isScrolling={isScrolling}
                key={key}
                rowIndex={index}
                parent={parent}>
                {({measure, registerChild}) => (
                    <div key={key}  style={style} onLoad={measure}>
                        <div
                            onLoad={measure}
                            ref={registerChild}
                            {...parentProps}>
                            <Item
                                onLoad={measure}
                                key={annotation.getId()}
                                {...childProps}
                            />
                        </div>
                    </div>
                )}
            </CellMeasurer>
        )
    }

renderDynamicListOfItems(){
   return (<div>
                <List
                    height={500}
                    ref={listComponent => (_this.listComponent = listComponent)}
                    style={{
                        width: '100%'

                    }}
                    onRowsRendered={()=>{}}
                    width={1000}
                    rowCount={props.items.length}
                    rowHeight={this._cache.rowHeight}
                    rowRenderer={memoize(this.ItemView)}
                    // onScroll={onChildScroll}
                    className={listClassName}
                    overscanRowCount={0}
                />
            </div>
     )
}

此外，我在其 componentDidUpdate 中手动触发对我的项目的重新测量，如下所示（）

    Component Item 
    ...
    componentDidUpdate() {
        console.log('loading called for ', this.props.annotation.getId())
        this.props.onLoad()
    }
    ...

在主父项中，每次列表更新并触发 forceupdate 时，我都会重新计算列表的高度，如下所示

Component ParentList
...
    componentDidUpdate() {
        console.log("calling this parent recomputing")
        this.listComponent.recomputeRowHeights()
        this.listComponent.forceUpdateGrid()
    }
...
4

1 回答 1

0

我刚刚遇到了同样的问题，结果是我的组件中的一些布局更新，在它被.ItemCellMeasurer

修复是传递measure函数并在每次布局更新时调用它。就我而言，它是

  1. 正在加载的图像
  2. 和正在处理的文本Twemoji（用图像替换表情符号）。

在滚动到列表顶部时添加一些新列表项后，我也遇到了从缓存中获取正确高度的问题。这可以通过向 提供 akeyMapper来解决CellMeasurerCache：

    const [cache, setCache] = useState<CellMeasurerCache>();

    useEffect(() => {
        setCache(new CellMeasurerCache({
            keyMapper: (rowIndex: number, columnIndex: number) => listItems[rowIndex].id,
            defaultHeight: 100,
            fixedWidth: true,
        }));
    }, [listItems]);
于 2021-11-15T17:26:58.037 回答