Question

我有一个带有一些冗长列标题的react-virtualized Table，并希望列标题包装而不是用省略号删除。任何人都知道如何实现这一目标？

供参考，以下是一些示例代码：

makeTable = <AutoSizer>
    {({ width, height }) => (
        <Table ref={this.setTableRef.bind(this)}
            width={width}
            height={height}
            headerHeight={20}
            rowHeight={this._rowHeight.bind(this)}
            rowCount={this.props.reportRows.length}
            rowGetter={this._rowGetter.bind(this)}
            rowClassName={this._rowClassName.bind(this)}
        >
            <Column
                label='Super Long Column Header Name of Longness'
                dataKey='testCase'
                width={150}
                flexGrow={1}
                cellRenderer={this._testCaseCellRenderer.bind(this)}

            />

[truncated the code above]

正如你所看到的，这是我需要包装的label，但我申请的任何风格都不起作用，无论是Column还是css。救命？谢谢！

Answer 1

我假设您要包含react-virtualized中指定的样式？对于上下文，应用该样式的是this line in their stylesheet。

看起来className是hard injected when loading default render所以你必须用你自己的同名风格覆盖这个样式，定义你自己的样式，以某种方式可以用更高的CSS将样式应用于这个元素特异性或过度杀伤，定义自己的headerRenderer which Column provides a way to do。

仅仅是一个FYI - 自然react-virtualized以某种方式拥有很多组件，并且它的响应方面也是如此。我建议通过Chrome开发工具中的CSS在他们的playground中玩游戏，这样如果删除换行符的行为与预期不同，那么您可以看到可能需要更改的内容。

如何在反应虚拟化中获取列标题？

1 个答案: