0

这是我的反应组件的cellSizeAndPositionGetter和render功能。当我调整屏幕大小时，我的屏幕布局没有改变，但我可以通过控制台确认widthand 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);
}
4

1 回答 1

2

变化是否width意味着重新流动细胞？（你想Collection改变内部单元格的大小和位置吗？）如果是这样，你需要存储一个引用Collection，然后collectionRef.recomputeCellSizesAndPositions()在width改变时调用。

Collection（与所有其他 react-virtualized 组件一样）缓存大小和位置信息以提高性能。如果情况发生变化，您需要明确清除这些缓存。见这里和这里。

于 2017-01-23T17:35:51.350 回答