我如何告诉 Masonry 组件它的单元格已经改变了高度？

我有一个反应组件，它以网格模式显示一维项目列表。每个项目都具有相同的宽度和高度，并且它们位于三列内。可能有很多这样的东西，所以我决定使用 Masonry 组件来尝试一下 React-virtualized，该组件似乎是专门为这个用例而编写的。它工作得很好，但有一点需要注意：如果项目改变了它们的高度，我无法让 Masonry 注意到。

这是一个简化的示例：

constructor(props) {
    [...]
    this.cellMeasurerCache = new CellMeasurerCache({
        defaultHeight: this.state.height,
        fixedWidth: true,
    });

    this.cellPositioner = createMasonryCellPositioner({
        cellMeasurerCache: this.cellMeasurerCache,
        columnCount: 3,
        columnWidth: 250,
        spacer: 20,
    });
}

[...]

cellRenderer({ index, key, parent, style }) {
    return (
        <CellMeasurer
            cache={this.cellMeasurerCache}
            index={index}
            key={key}
            parent={parent}
        >
            <div style={style}>
                [...]
            </div>
        </CellMeasurer>
    );
}

resetMasonry() {
    this.cellMeasurerCache.clearAll();

    this.cellPositioner.reset({
        cache: this.cellMeasurerCache,
        columnCount: 3,
        columnWidth: 250,
        spacer: 20,
    });

    this.masonryRef.recomputeCellPositions();
}

render() {
    return (
        <AutoSizer>
            {({ height, width }) =>
                <Masonry
                    cellCount={this.state.list.length}
                    cellMeasurerCache={this.cellMeasurerCache}
                    cellPositioner={this.cellPositioner}
                    cellRenderer={this.cellRenderer}
                    height={height}
                    ref={this.setMasonryRef}
                    width={width}
                />
            }
        </AutoSizer>
    );
}

resetMasonry当组件的高度状态发生变化时调用。我从几个 stackoverflow 答案和其他资源中对当前代码进行了货物崇拜，甚至检查了源代码，但没有任何效果。我注意到我没有告诉 cellMeasurerCache 或任何其他有关高度变化的信息，所以我真的不应该期望它能够工作，但似乎没有办法在那里获取该信息，甚至不能通过实例化新的CellMeasurerCache.

顺便说一句，如果我改变内的columnWidthcellPositioner.reset，Masonry组件相应更新，果然。

有谁知道我缺少什么才能让它适应高度变化？谢谢！

If your Masonry单元格的大小发生变化，您需要清除缓存中的大小CellMeasurerCache然后确保cellPositioner也知道新尺寸。例如：

// Clear cached measurements since sizes have changed:
cellMeasurerCache.clearAll()

// Let your component know it needs to re-render
this.setState({...}, () => {
  // Assuming you're using the default createCellPositioner()
  // Let it know of any values that may have changed:
  cellPositioner.reset({
    columnCount,
    columnWidth,
    spacer
  })

  // Tell Masonry to discard any cached position data:
  masonryRef.clearCellPositions()
})

您可以看到一个演示Masonry组件上的列高度发生变化RV site https://bvaughn.github.io/react-virtualized/#/components/Masonry只需更改列宽即可。该演示的源代码可用在 GitHub 存储库中 https://github.com/bvaughn/react-virtualized/blob/master/source/Masonry/Masonry.example.js also.

根据你的描述，我不建议使用Masonry。我实际上只是建议使用List与我在本例中的做法类似：http://plnkr.co/edit/zjCwNeRZ7XtmFp1PDBsc?p=preview http://plnkr.co/edit/zjCwNeRZ7XtmFp1PDBsc?p=preview

关键是根据可用宽度动态计算每行的项目数，然后给出List调整后的rowCount:

  const itemsPerRow = Math.floor(width / ITEM_SIZE);
  const rowCount = Math.ceil(ITEMS_COUNT / itemsPerRow);