我正在寻找帮助,在反应中构建实体数据表组件。
我正在使用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有各种不同(有些有编辑记录模式,有些有按钮添加新记录等)我怎样才能避免在几十个地方重复过滤逻辑?
答案 0 :(得分:0)
我认为你有两种选择。
utils
目录或其他内容中。为什么不直接将过滤器作为参数传递?
答案 1 :(得分:0)
好的,过了一段时间后,我决定回到此处帮助其他人。
我已经转移到项目中加入redux(出于很多原因)。 特别是在这个主题上,我现在有了一个CreateSearchableTable函数,该函数用于创建名称空间的SearchableTable reducers的工厂。这允许重用所有提取/无限滚动/分页/过滤/排序逻辑。我目前正在努力寻找删除重复动作创建者的最佳方法。