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

Question

我正在学习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 不提供布局回流机制，也不计算单元格内容的宽度和高度等内容布局信息。

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

Answer 1

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

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