使用具有最大宽度的 cellmeasurer 进行反应虚拟化？答案

【问题标题】：React-Virtualized using cellmeasurer with a maximum width?使用具有最大宽度的 cellmeasurer 进行反应虚拟化？
【发布时间】：2017-03-03 13:13:32
【问题描述】：

有没有办法使用 react-virtualized 的 CellMeasurer 最大列宽，然后使高度扩大？

例如，我可能在网格的第一列中有一个 id 字段。这永远不会变得太大，但我想根据最大值来调整它的大小。然后在第二列中，我有一个文本字段，我不太确定它会有多大。如果事实证明我当前的所有数据集在第二列中都有一个小值，我想根据最大值调整大小。如果它恰好有一些较大的文本（超过一定宽度），我想使用该最大宽度，然后扩展行的高度以容纳行文本。

据我在文档和代码中看到的，不支持这种类型的功能。如果是这种情况，我认为我最好的方法是使用稍微复杂的_measure 函数来实现我自己的CellMeasurer。这听起来像是正确的做法吗？

【问题讨论】：

标签： react-virtualized

【解决方案1】：

您应该能够通过向渲染的单元格添加样式约束来做到这一点。 CellMeasurer 只测量浏览器报告的内容，而 CSS 控制浏览器的最大宽度。

React 也可能会冻结样式对象，因此请使用扩展而不是直接修改：

style={{
  ...style,
 maxWidth: 300
}}

【讨论】：

啊，好吧，我的错。我从测量两个维度中看到了警告，并将其注册为不允许的内容。现在看起来不错，谢谢！
感谢您创建插件并支持它！
这不是最优的，因为它会导致贪婪地预先测量大量内容，所以我警告它。如果你能避免它，你应该。在您的情况下，我建议您考虑使用 300 的固定单元格宽度并仅使用动态高度 - 但这是您的决定。 :)