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%的div中。 然后将引用附加到该div并阅读其 clientWidth 。一旦有了它，只需将其作为宽度传递到<Table />组件。

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