Сортировка столбца таблицы с использованием реагирующей начальной загрузки не работает

Question

Я изучаю использование библиотеки act-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