如何使用蓝图在 React 中渲染 table

Question

我正在尝试使用 React 和 Blueprint UI 工具包渲染一个非常简单的 table。

相对于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')
);

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

Answer 1

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

Answer 2

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

Answer 3

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

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

Answer 4

对我来说，

yarn add @blueprintjs/core @blueprintjs/table

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

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

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

如何使用蓝图在 React 中渲染 table

How to render a table in React by using Blueprint

javascript

reactjs

react-jsx

jsx

blueprint