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

Question

我正在学习固定数据表-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

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

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