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>是一个组件，而不是标签。您正在做的是使用此组件的 properties 并将其作为<th>标签的 attributes 插入。这行不通。我不会说永远不会，因为在某些情况下，有些属性会直接转换为标签属性，但总的来说-就是不要。

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

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

旁注：

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

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

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

1 个答案: