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 中。 然后將 ref 附加到此 div 並讀取其clientWidth 。 一旦你有了它，只需將它作為寬度傳遞給<Table />組件。

如果您想考慮用戶更改瀏覽器寬度，這當然會變得更加復雜 - 您需要一種方法來監聽窗口或元素大小的變化 - 並相應地更改寬度。