javascript - 当使用新的宽度和columnCount重新渲染时，如何让react-virtualized Collection进行更新？

Question

这里是cellSizeAndPositionGetter和render我的 react 组件的函数。当我调整屏幕大小时，我的屏幕布局没有改变，但我可以通过控制台确认 width和state.columnCount (由 cellSizeAndPositionGetter 使用)正在改变。

是否可以触发 Collection更新以下参数更改(即 width )？或者我在这里做错了什么？

旁注:react-virtualized List 确实在宽度参数更改时更新。

cellSizeAndPositionGetter({index}) {
    const list = this.state.cardsList;
    const columnCount = this.state.columnCount;

    const columnPosition = index % (columnCount || 1);
    const datum = list[index]; 

    const height = datum.height;
    const width = CELL_WIDTH;
    const x = columnPosition * (GUTTER_SIZE + width);
    const y = this._columnYMap[columnPosition] || 0;

    this._columnYMap[columnPosition] = y + height + GUTTER_SIZE;

    return ({
        height,
        width,
        x,
        y
    });
}

...

render() {
    return (
        <div style={styles.subMain}>
            <AutoSizer >
                {({height, width}) => {
                    console.log(`width: ${width}`);
                    console.log(`col count: ${this.state.columnCount}`);
                    return (
                        <Collection
                            cellCount={this.state.cardsList.length}
                            cellRenderer={this.cellRenderer}
                            cellSizeAndPositionGetter={this.cellSizeAndPositionGetter}
                            height={height}
                            width={width}
                            overscanRowCount={1}
                        />
                    );
                }}
            </AutoSizer>
        </div>
    );
}

<小时/>

更新:(几个小时后)

我发现了一个非常笨拙的解决方法来获取 react-virtualize Collection在宽度参数更改后更新。

当屏幕尺寸发生变化时，我会删除 Collection 列表中的最后一个元素显示元素(图像)。起初我尝试清除列表，但这会导致明显的视觉副作用。现在，在调整屏幕大小时，只有显示屏中的最终图像会奇怪地闪烁。

但是获得 Collection 仍然会很高兴更新以下width改变。 :)

这是似乎欺骗 Collection 的代码进入更新。关键部分是setState的第三行我删除了最后一个元素。

updateDimensions() {
    this.setState({
        screenWidth: window.innerWidth,
        columnCount: Math.floor(window.innerWidth / (CELL_WIDTH + GUTTER_SIZE)),
        cardsList: [...this.state.cardsList.slice(0, this.state.cardsList.length - 1)] 
    });
}

componentDidMount() {
    ...
    window.addEventListener("resize", this.updateDimensions);
}

Answer 1

width 有变化吗意味着回流细胞？ (您是否希望 Collection 内的单元格大小和位置发生变化？)如果是这样，您需要存储对 Collection 的引用。然后调用collectionRef.recomputeCellSizesAndPositions()当width变化。

Collection (与所有其他 react 虚拟化组件一样)缓存大小和位置信息以提高性能。如果情况发生变化，您需要显式清除这些缓存。请参阅here和 here .