如何使用新宽度和columnCount重新呈现react-virtualized Collection时进行更新？

以下是我的反应组件的cellSizeAndPositionGetter和render函数。当我调整屏幕大小时，我的屏幕布局不会改变，但我可以通过控制台确认width和state.columnCount（由cellSizeAndPositionGetter使用）正在改变。如何使用新宽度和columnCount重新呈现react-virtualized Collection时进行更新？

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

旁注：react-virtualizedList确实更新宽度参数更改。

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> 
    ); 
}

UPDATE：（数小时后）

我发现了一个很缺憾工作各地去react-virtualizeCollection更新之后的宽度参数更改。

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

但它仍然会很高兴得到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); 
}

来源

2017-01-22 stuart

width是否意味着回流细胞？（你是否希望Collection中的单元格大小和位置发生变化？）如果是这样，则需要存储Collection的引用，然后在width更改时请拨collectionRef.recomputeCellSizesAndPositions()。（像所有其他反应虚拟化组件）缓存大小和位置信息的性能。如果事情发生变化，您需要明确清除这些缓存。见here和here。

来源

2017-01-23 17:35:51 brianvaughn

如何使用新宽度和columnCount重新呈现react-virtualized Collection时进行更新？

回答

相关问题