使用react bootstrap排序表列不起作用

Question

我正在研究使用react-bootstrap-table库，主要是因为对列进行排序似乎很容易。 我需要坚持使用该库中的结构吗？

我的旧项目使用的是常规表，看起来确实很混乱。

这个库看起来很简单，我希望我能够使用该库的元素，而不是全部使用排序表功能。

我一直在这里看，但找不到任何有关使用常规表的信息

http://allenfang.github.io/react-bootstrap-table

我假设我需要使用正确的库才能使其正常工作。 这样的。

<BootstrapTable ref='table' data={ products }>
<TableHeaderColumn dataField='id' isKey={ true } dataSort={ true }>Product ID</TableHeaderColumn>
</BootstrapTable>

但是我做不到。

<Table ref='table' data={ products }>
<thead>
<tr>
<th dataField='id' isKey={ true } dataSort={ true }>Product ID</TableHeaderColumn></th>
</tr>
</thead>
</Table>

Answer 1

好吧，您当然不能使用像这样的单端组件标签。 <th></TableHeaderColumn></th>永远不会起作用，因为没有相应的<TableHeaderColumn> 。

因此， <TableHeaderColumn>是一个组件，而不是标签。 你在做什么使用该组件的性能和插入他们的属性是<th>标签。 这行不通。 我不会说永远不会，因为在某些情况下，有些属性会直接转换为标签属性，但总的来说-不会。

如果要使用组件库，则在某些情况下，如果正确导出和合并了子组件，则可以使用子组件。 恐怕该库不是这种情况。 它是为了整体运作。 标题的组件为表格主体组件的功能提供排序指令/数据。 也就是说，表主体组件使用从表头提供的数据来确定表中数据的排序顺序。

我希望这是有道理的。 简而言之，此表库是一个整体，而不是一部分。 我敢肯定，只要有足够的时间，人们就可以拆散该库并使其部分工作而不需要整个库，但是仅仅使用整个库并重建表可能会更容易/更快。

旁注：

在查看React-Bootstrap-Table文档时，它首先指出它已被弃用（我之所以提及这一点，是因为未显示您的完整代码，并且不确定所导入的版本）。

这是不推荐使用的版本： React-Bootstrap-Table2