React FixedDataTable 响应行/单元格大小

Question

在定义固定数据表时，您可以使用 rowHeight 属性指定行高。但是，如果cell 的内容太大，通过设置一个静态值（例如，50 像素高），它会被截断，因为高度是明确设置的。我看到有一个 rowHeightGetter 回调函数，但该函数的参数似乎没有任何相关性（也许它可能是它正在获取的行？哪种有意义但与数据无关对于特定列或cell)。

所以我很好奇，有什么方法可以让cell（甚至在某种程度上）响应它包含的数据？

var Table = FixedDataTable.Table,
  Column = FixedDataTable.Column,
  Cell = FixedDataTable.Cell;

var rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3'],
  // .... and more
];

ReactDOM.render(
  <Table
    rowHeight={50}
    rowsCount={rows.length}
    width={500}
    height={500}
    headerHeight={50}>
    <Column
      header={<Cell>Col 1</Cell>}
      cell={<Cell>Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content </Cell>}
      width={200}
    />
    <Column
      header={<Cell>Col 3</Cell>}
      cell={({rowIndex, ...props}) => (
        <Cell {...props}>
          Data for column 3: {rows[rowIndex][2]}
        </Cell>
      )}
      width={200}
    />
  </Table>,
  document.getElementById('CustomDataTable1')
);

这是一个简单的示例，但是如果/当您运行它时，您会看到第一列单元格的内容被截断，并且您无法看到其中包含的其他内容。

我已经在这个问题上苦苦挣扎了一段时间，但没有找到任何可以帮助我的东西。我开始认为我需要使用其他东西。任何人都可以提供任何提示或建议吗？

谢谢， 克里斯托夫

Answer 1

可变的、基于渲染内容的行高、无限滚动和合理的性能是难以同时满足的要求。固定数据表针对大型表的快速渲染和滚动进行了优化。为了有效地支持这一点，它需要在渲染之前知道数据集中每一行的高度（理想和最快的情况是每一行都具有相同的预定义高度）。

所以，如果你真的需要无限滚动，你需要从索引中计算出每行有多大。我想你可以通过将行单独手动渲染到屏幕外的普通 html 表并测量它的高度（并缓存结果）来实现此方法，或者使用更简单的算法（例如，猜测合理的所需高度）关于内容）。前一种方法不太可能表现得特别好，虽然我没有尝试过。

如果您不需要无限滚动，请删除固定数据表并只渲染一个普通的 HTML

，它可以很好地处理基于内容的行高（使用适当的 CSS 来根据需要进行布局）。

最后一个选项是实现一个奇妙的自调整无限滚动表组件，它在渲染后根据每行的高度自动调整其滚动位置。祝你好运（我认为这是可能的！）

【讨论】：

Answer 2

在link 中，作者建议在 componentDidMount 事件上通过 React.getDOMNode().outerHeight 检查行高。也许您可以将此信息与 rowHeightGetter 回调相结合，以相应地调整行高。

有一个使用rowHeightGetter回调here的例子。