如何使用蓝图在 React 中渲染 table
How to render a table in React by using Blueprint
我正在尝试使用 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')
);
下图显示了我得到的结果。我该如何解决?
您的页面上是否包含 blueprint.css
和 blueprint-table.css
?如果没有样式表,Table 将无法正确呈现!
导入'@blueprintjs/core/dist/blueprint.css'
我必须在我的 css 文件中包含这一行(使用 create-react-app 设置的 webpack):
@import '~@blueprintjs/table/dist/table.css';
对我来说,
yarn add @blueprintjs/core @blueprintjs/table
然后使用我的 React 组件文件中的相对路径
import { Cell, Column, Table } from '@blueprintjs/table'
import '../../node_modules/@blueprintjs/table/lib/css/table.css'
我正在尝试使用 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')
);
下图显示了我得到的结果。我该如何解决?
您的页面上是否包含 blueprint.css
和 blueprint-table.css
?如果没有样式表,Table 将无法正确呈现!
导入'@blueprintjs/core/dist/blueprint.css'
我必须在我的 css 文件中包含这一行(使用 create-react-app 设置的 webpack):
@import '~@blueprintjs/table/dist/table.css';
对我来说,
yarn add @blueprintjs/core @blueprintjs/table
然后使用我的 React 组件文件中的相对路径
import { Cell, Column, Table } from '@blueprintjs/table'
import '../../node_modules/@blueprintjs/table/lib/css/table.css'