reactjs - 使用 react-bootstrap-table 在表头和表之间获取空格

Question

我的代码是：

  <Panel>
    <BootstrapTable data={this.state.keys} striped hover condensed>
      <TableHeaderColumn isKey dataField='id' dataAlign='center'>ID</TableHeaderColumn>
      <TableHeaderColumn dataField='key' dataAlign='center'>Key</TableHeaderColumn>
      <TableHeaderColumn dataField='key' dataAlign='center'>&nbsp;</TableHeaderColumn>
    </BootstrapTable>
  </Panel>

这就是它的样子：

Answer 1

你没有列出你使用的版本，所以很难说问题是什么。

首先，我会确保您使用的是最新版本。

但是，我可以在您的代码中看到几个问题：

1. 你得到了isKey没有值的属性。那应该是isKey={true}
2. 您已经列出dataField=key了两次，但只显示了一列，我想不出为什么会发生这种情况（当我尝试它在两列中显示相同的数据时）：

您的数据格式应类似于：

var this.state.keys = [{
  id: 1,
  key: 123
}, {
  id: 2,
  key: 3425
}, {
  id: 3,
  key: 98765
}, {
  id: 4,
  key: 56555
}];

这是它与最新版本的 React 和 React-Bootstrap-Table 一起正常工作的 Plunker：
http ://plnkr.co/edit/01OFaXq5X1UtZBW1oZzM?p=preview

正如您从 Plunker 中看到的，它似乎可以在最新版本中正常工作。

Answer 2

import 'react-bootstrap-table/css/react-bootstrap-table.css';

这对我有用。