Question

我正在寻找帮助，在反应中构建实体数据表组件。

我正在使用react-virtualized并尝试确定如何封装用于服务器端排序/过滤/分页/行删除等的样板功能。

我从一个简单的，自包含的组件开始，它只需要一个API路径，并通过本地状态自行处理所有内容。

需要能够从表组件外部更新/删除/添加/刷新记录，我将表状态/逻辑移动到管理表的容器组件中，以及一些按钮和模态窗口。

但是，现在所有用于排序/过滤/分页的处理程序都在这个容器中，似乎它们都必须重复才能被重用于需求略有不同的其他表，但完全相同的排序/过滤/分页。

如何在表组件中包含样板表逻辑，同时还能够从组件外部更新/删除/添加/刷新记录？

为了形象化，这是一个人为的例子，其中所有逻辑和状态都封装在TableWithFilter组件中：

<SomeEntityList>
    <TableWithFilter apiPath={this.props.apiPath}>
        <FilterBar />
        <Table /> 
    <TableWithFilter>
</SomeEntityList>

过滤器方法和状态可以存在于TableWithFilter：

中

TableWithFilter._handleFilter() {
    // get filter, inject filter into api path, get records, update state 
}

现在，假设我们需要添加一个模态，以便我们可以编辑一行中的值：

<SomeEntityList>
    <EditRowModal />
    <TableWithFilter>
        <FilterBar />
        <Table />
    <TableWithFilter>
</SomeEntityList>

然后必须将状态和过滤器方法移动到SomeEntityList组件，以便模式可以更改表中的记录：

SomeEntityList._handleFilter() { 
    //get filter, inject filter into api path, get records, update state 
}

SomeEntityList._editRow() { 
    // make update call, update state 
}

假设我有几十种不同的SomeEntityListA / SomeEntityListB / SomeEntityListC有各种不同（有些有编辑记录模式，有些有按钮添加新记录等）我怎样才能避免在几十个地方重复过滤逻辑？

Answer 1

我认为你有两种选择。

如果可重用过滤器的逻辑功能正常，您可以将它们完全移出组件并将它们放在utils目录或其他内容中。
使用higher-order components。

修改

为什么不直接将过滤器作为参数传递？

Answer 2

好的，过了一段时间后，我决定回到此处帮助其他人。

我已经转移到项目中加入redux（出于很多原因）。特别是在这个主题上，我现在有了一个CreateSearchableTable函数，该函数用于创建名称空间的SearchableTable reducers的工厂。这允许重用所有提取/无限滚动/分页/过滤/排序逻辑。我目前正在努力寻找删除重复动作创建者的最佳方法。

如何避免在反应数据表中重复逻辑

2 个答案:

修改