0

我使用react-bootstrap-tablelib 来显示表格，并且在我的项目中使用了很多（大约 10 次）表格，它们都有像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 data={slotListVM} colume1={'id'} colume2={'name'}>
    </Table>

但我觉得 

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

是一个更好的解决方案。

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

4

1 回答 1

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

于 2018-01-22T10:08:16.570 回答