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

【问题标题】：reactjs and fixed-data-table-2: 100% width for tablereactjs 和 fixed-data-table-2：表格的 100% 宽度
【发布时间】：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 /> 组件。

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

【讨论】：