React虚拟化表不作为表呈现

Question

我有一个基于demo编写的超级基本示例，但它不起作用：

<div id="page">
  <div id="wrapper">
    <div class="table">
      <div class="table-cell">
        Table cell 1
      </div>
      <div class="table-cell">
        Table cell 2
      </div>
    </div>
  </div>
</div>

结果如下：

我确定我必须遗漏一些东西，我错过了什么，为什么它不显示为桌子？

Answer 1

您没有导入CSS。 Table组件是唯一需要CSS来设置flexbox布局样式的组件。

结帐the docs：

// Most of react-virtualized's styles are functional (eg position, size).
// Functional styles are applied directly to DOM elements.
// The Table component ships with a few presentational styles as well.
// They are optional, but if you want them you will need to also import the CSS file.
// This only needs to be done once; probably during your application's bootstrapping process.
import 'react-virtualized/styles.css'

// You can import any component you want as a named export from 'react-virtualized', eg
import { Column, Table } from 'react-virtualized'

Answer 2

如果需要，您还可以为表格提供自己的样式。在您作为导入链接回到类的CSS中，可以定义react-virtualize内置类，如下所示：

:global {
  .ReactVirtualized__Table {

  }

  .ReactVirtualized__Table__headerColumn {

  }

  .ReactVirtualized__Table__headerRow {

  }

  .ReactVirtualized__Table__row {

  }

  .ReactVirtualized__Table__rowColumn {

  }
}

我建议使用flex来操纵表格外观。希望有帮助。