7

定义固定数据表时，使用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')
);

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

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

谢谢，克里斯托夫

4

2 回答 2

4

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

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

如果您不需要无限滚动，请删除 Fixed Data Table 并仅渲染一个普通的 HTML <table>，它将很好地处理您基于内容的行高（使用适当的 CSS 以您想要的方式进行布局）。

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

于 2015-12-01T17:53:51.067 回答
0

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

这里有一个使用 rowHeightGetter 回调的示例。

于 2017-05-16T19:14:42.907 回答