如何将 table 提取为独立组件

Question

我用了react-bootstrap-table库来显示tables，我在我的项目中使用了很多（大约10次）tables，它们都有共同的选项，比如exportCSV search clearSearchECC。创建一个通用组件（标签）以集中 BootstrapTable 和 TableHeaderColumn 标签是有意义的。

我想要下面的代码

    <BootstrapTable data={slotListVM}  exportCSV search options={options}>
                <TableHeaderColumn dataField="id" width="150" dataSort>ID</TableHeaderColumn
    </BootstrapTable>

成为

    <Table data={slotListVM}>
                <TableColumn dataField="id">ID</TableColumn>
    </Table>

可能吗？（我试过了，但出现 Uncaught (in promise) TypeError: Cannot read property 'reduce' of undefined at BootstrapTable.initTable 错误）

PS：我考虑通过传递所有列数据将 table 作为一个组件集中，喜欢

    <Table data={slotListVM} colume1={'id'} colume2={'name'}>
    </Table>

但我认为

    <Table data={slotListVM}>
                <TableColumn dataField="id">ID</TableColumn>
    </Table>

是更好的解决方案。

有人可以给我一些建议吗？非常感谢！

Answer 1

如何将 react-bootstrap-table lib 组件 - BootstrapTable 和 TableHeaderColumn 包装到您自己的无状态功能组件中，例如：

const Table = ({data, options, children} => (
  <BootstrapTable data={data} options={options} exportCSV search>
    {children}
  </BootstrapTable>
)

与 TableColumn 相同：

const TableColumn = ({dataField, children} => (
  <TableHeaderColumn dataField={dataField} width="150" dataSort>
    {children}
  </TableHeaderColumn>
)

您可以在此处阅读更多相关信息：

https://javascriptplayground.com/functional-stateless-components-react/ https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc

如何将 table 提取为独立组件

How to extract table as an indipendente component

reactjs

react-bootstrap-table