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

这是一个简单的例子，但如果/当你运行它时，你会看到第一列单元格的内容被切断，你不能看到其中包含的内容。

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

日Thnx，克里斯托弗

Answer 1

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

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

如果您不需要无限滚动，请删除固定数据表，然后只渲染一个简单的HTML＆lt; table＆gt;，它将处理您基于内容的行高度（使用适当的CSS按照您的要求进行布局）。

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

Answer 2

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

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

React FixedDataTable响应行/单元格大小

2 个答案: