React-Virtualized Table 仅显示一列答案

【问题标题】：React-Virtualized Table only showing one columnReact-Virtualized Table 仅显示一列
【发布时间】：2017-12-22 13:55:25
【问题描述】：

我正在使用 react-virtualized 的表并为该表定义了 4 列。由于某种原因，它只显示第一列。我无法显示其他列。不知道我做错了什么。下面是sn-p的代码：

const BTable = ({bdata}) => { 
return(
    <AutoSizer disableHeight>
        {({ width }) => (
            <Table
                headerHeight={20}
                height={300}
                width={width}
                overscanRowCount={5}
                rowHeight={20}
                rowGetter={({index}) => (bdata[index])}
                rowCount={bdata.length}
                noRowsRenderer={() => (<div></div>)}>
                <Column
                    label='Id'
                    cellDataGetter={
                      ({ columnData, dataKey, rowData }) => (rowData[dataKey])
                    }
                    dataKey='id'
                    width={200}
                    />      
                <Column
                    label='Account'
                    cellDataGetter={
                      ({ columnData, dataKey, rowData }) => (rowData[dataKey])
                    }
                    dataKey='account'
                    width={200}
                    />      
                 ....
                 ....
         </Table>
     <AutoSizer>
)

【问题讨论】：

这绝对是他们需要修复的错误。如果您在 Google Chrome 开发工具中使用它并将标题行溢出的 div 更改为未隐藏，您会看到下一列出现在第一列下方而不是旁边。

标签： reactjs react-virtualized

【解决方案1】：

我刚遇到这个问题，原来我忘了从 react-virtualized 导入 CSS 文件。 import 'react-virtualized/styles.css' 在 index.js 中（或任何你想导入它的地方）。

【讨论】：

【解决方案2】：

对于其他为此苦苦挣扎的人。

我通过在我的 webpack 配置中不使用 css 模块解决了这个问题。因此，请确保正确包含 css 文件，并且您已将 css 模块从您正在使用的任何捆绑器中排除。

【讨论】：

【解决方案3】：

那些cellDataGetter 道具是不必要的。 default getter 适用于该用例。

您在上面粘贴的内容应该可以工作。 Here's a Plnkr 展示了一个可以正常工作的精简版。

 <Table
    headerHeight={20}
    height={300}
    width={400}
    overscanRowCount={5}
    rowHeight={20}
    rowGetter={({index}) => (list[index])}
    rowCount={list.length}
    noRowsRenderer={() => (<div></div>)}>
    <Column
      label='Id'
      dataKey='id'
      width={200}
    />
    <Column
      label='Account'
      dataKey='account'
      width={200}
    />
  </Table>

如果您需要更多反馈，恐怕您需要分享一个 Plnkr（或类似的）来显示您报告的问题。

【讨论】：

仍然对我不起作用，并且很难在 plunkr 中复制。我可以显示问题的屏幕截图（在调试时这些列看起来像是行）但似乎无法在此处附加屏幕截图。我将在 github 上发布一个问题，因为我可以做的比 SO 更多。
"很难在 plunkr 中复制" - 我不明白这一点。 Fork 我给你的工作示例并展示它是如何破坏的。
嗯，这基本上就是我所拥有的（它不起作用，不知道为什么）：plnkr.co/edit/PpKGTZixIF9SS3Q4f8bL
它不起作用 b'c Plnkr 不支持 import 或 require 语法。
它依赖于旧版本的 React。更新为别针。现在应该可以工作了。

【解决方案4】：

只需添加下面给出的行，您的代码就会运行。

导入'react-virtualized/styles.css'

【讨论】：