reactjs 和 fixed-data-table-2：表格的 100% 宽度

Posted 2023-02-21

【中文标题】reactjs 和 fixed-data-table-2：表格的 100% 宽度

【英文标题】：reactjs and fixed-data-table-2: 100% width for table

【发布时间】：2018-03-19 20:41:26

【问题描述】：

我正在学习 fixed-data-table-2 并尝试将 100% 的宽度传递给它。

<Table
rowsCount=this.state.countries.length
rowHeight=50
headerHeight=50
width='100%'
height=500>

这可行（至少在 Chrome 中），并且表格确实延伸到整个页面宽度，但可以预见的是控制台充满了错误：

Warning: Failed prop type: Invalid prop `width` of type `string` supplied to `FixedDataTable`, expected `number`.

我明白了

FixedDataTable 不提供布局重排机制，也不计算单元格内容的宽度和高度等内容布局信息。

那么将它拉伸到整个容器宽度的正确方法是什么？

【参考方案1】：

首先，您可以使用width: 100% 将<Table /> 组件包装在一个div 中。 然后将 ref 附加到这个 div 并读取它的 clientWidth。一旦你有了它，只需将它作为宽度传递给<Table /> 组件。

如果您想考虑用户更改浏览器宽度，这当然会变得更加复杂 - 您需要一种方法来监听窗口或元素大小的变化 - 并相应地更改宽度。