如何获取 Column 的内容以包装在 react-virtualized 中答案

【问题标题】：How to get content of Column to wrap in react-virtualized如何获取 Column 的内容以包装在 react-virtualized 中
【发布时间】：2017-06-22 19:16:24
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： react-virtualized

【解决方案1】：

如果您使用 Column 的内置样式和默认渲染器，则文本不会换行。（设置为white-space: nowrap。）您可以不使用默认渲染器，或者不加载样式表，或者您可以随意覆盖它们。最简单的方法可能是为Column 提供您自己的cellRenderer。

查看Table + CellMeasurer demo page（来源here）以获取带有换行文本的Column 示例。

【讨论】：