如何获取Column的内容以进行包装

Question

我正在使用react-virtualized Table在InfiniteLoader组件中显示。我有多个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。）您可以不使用默认渲染器，也可以不加载样式表，也可以根据需要覆盖它们。最简单的方法可能只是为您自己cellRenderer提供Column。

请查看Table+ CellMeasurer 演示页（在此处提供源），以获得Column带换行文本的示例。