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

时间:2018-05-09 06:30:45

标签: javascript reactjs datatable

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

我正在使用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有各种不同(有些有编辑记录模式,有些有按钮添加新记录等)我怎样才能避免在几十个地方重复过滤逻辑?

2 个答案:

答案 0 :(得分:0)

我认为你有两种选择。

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

修改

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

答案 1 :(得分:0)

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

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