如何使用蓝图在 React 中渲染表格答案

【问题标题】：How to render a table in React by using Blueprint如何使用蓝图在 React 中渲染表格
【发布时间】：2016-11-23 06:39:31
【问题描述】：

我正在尝试使用 React 和 Blueprint UI 工具包呈现一个非常简单的表格。

相对于Table 组件的documentation 非常简单，但似乎我的代码不起作用。

import React from 'react';
import ReactDOM from 'react-dom';
import * as Blueprint from '@blueprintjs/core';
import { Cell, Column, Table } from '@blueprintjs/table';

const renderCell = (rowIndex: number) => {
    return <Cell>{`$${(rowIndex * 10).toFixed(2)}`}</Cell>
};

var myTable = (
  <Table numRows={10}>
    <Column name="Dollars" renderCell={renderCell}/>
  </Table>
);

ReactDOM.render(
  myTable,
  document.getElementById('myTable')
);

下图显示了我得到的结果。我该如何解决？

【问题讨论】：

标签： javascript reactjs react-jsx jsx blueprint

【解决方案1】：

您的页面上是否包含blueprint.css 和blueprint-table.css？没有样式表，表格将无法正确呈现！

【讨论】：

我有同样的问题，建议的包含不适用于使用 webpack 的样板，并且由于 @blueprintjs 模块名称中的 @ 而 require() 也不会包含 css，有什么想法吗？
有趣...这不在table install docs 中。对我来说，该文件位于 node_modules/@blueprintjs/table/dist/table.css 中（注意不同的 css 文件名）。

【解决方案2】：

我必须在我的 css 文件中包含这一行（使用 create-react-app 的 webpack 设置）：

@import '~@blueprintjs/table/dist/table.css';

【讨论】：

【解决方案3】：

对我来说，

yarn add @blueprintjs/core @blueprintjs/table

然后使用我的反应组件文件中的相对路径

import { Cell, Column, Table } from '@blueprintjs/table'

import '../../node_modules/@blueprintjs/table/lib/css/table.css'

【讨论】：

对于蓝图 3 + react: import '@blueprintjs/table/lib/css/table.css'

【解决方案4】：

导入'@blueprintjs/core/dist/blueprint.css'

【讨论】：