如何獲取列的內容以反應虛擬化包裝

Question

我正在使用react-virtualized在InfiniteLoader組件中顯示Table。我有多個Column條目2其中固定寬度和一個是可變的。我如何獲得可變寬度的包裝而不是切斷？代碼：

<InfiniteLoader 
     isRowLoaded={this.isRowLoaded} 
     loadMoreRows={this.loadMoreRows} 
     rowCount={99999999} 
    > 
     {({ onRowsRendered, registerChild }) => (
     <Table 
      width={this.state.width || 800} 
      height={1200} 
      rowCount={this.state.len} 
      rowHeight={this.lineSize} 
      rowGetter={this.renderItem} 
     > 
      <Column label='Index' dataKey='index' width={indexWidth} className='metadata'/> 
      <Column label='Date' dataKey='date' width={dateWidth} className='metadata' /> 
      <Column label='Text' dataKey='text' width={400} flexGrow={1}/> 
     </Table> 
    )} 
    </InfiniteLoader> 

Answer 1

如果您使用的是Column內置的風格和默認渲染器，然後文本將不換。 （它設置爲white-space: nowrap。）您可以使用默認的渲染器或者不加載樣式表，也可以使用而不是，或者您可以根據需要覆蓋它們。最簡單的方法可能是爲您提供Column自己的cellRenderer。

檢查出Table + CellMeasurerdemo page（源here）用於Column與文本換行的例子。