反应虚拟化表不呈现为表答案

【问题标题】：React-virtualized table not rendering as a table反应虚拟化表不呈现为表
【发布时间】：2018-08-16 00:52:45
【问题描述】：

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

import React from 'react';
import {
  Table,
  Column,
} from 'react-virtualized'

function MyTable(props) {
  return (
    <Table
      width={ 900 }
      height={ 500 }
      headerHeight={ 30 }
      rowHeight={ 30 }
      rowCount={ props.list.length }
      rowGetter={ ({ index }) => props.list[index] }
    >
      <Column
        width={ 250 }
        dataKey={ 'id' }
        headerRenderer={ ({ dataKey }) => 'Id' }
      />
      <Column
        width={ 250 }
        dataKey={ 'title' }
        headerRenderer={ ({ dataKey }) => 'Title' }
      />
    </Table>
  );
}

这是结果：

我确定我一定遗漏了什么，我遗漏了什么，为什么它没有显示为表格？

【问题讨论】：

标签： reactjs react-virtualized

【解决方案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'

【讨论】：

【解决方案2】：

如果您愿意，您还可以为表格提供自己的样式。在作为导入链接回类的 css 中，您可以像这样定义 react-virtualize 内置类：

:global {
  .ReactVirtualized__Table {

  }

  .ReactVirtualized__Table__headerColumn {

  }

  .ReactVirtualized__Table__headerRow {

  }

  .ReactVirtualized__Table__row {

  }

  .ReactVirtualized__Table__rowColumn {

  }
}

我建议使用 flex 来操作表格外观。希望对您有所帮助。

【讨论】：