React Table外置独立过滤器实现服务端过滤相关问题

1. 过滤器配置问题 #

• 你对includes的理解是对的，它是react-table预设的客户端过滤规则标识，对应内置的前端匹配逻辑，仅用于客户端过滤场景。
• 完全可以把filter属性的值替换为Django的过滤标识，甚至你可以直接在列定义中新增自定义字段（比如djangoOperator）来存对应标识，列定义本身支持任意自定义属性，没有强制约束。
• 后端已经实现过滤逻辑的前提下，完全不需要在客户端重复实现过滤逻辑，react-table的Filter属性、内置过滤规则都是为纯前端过滤场景设计的，服务端过滤场景下可以直接省略这些配置，也不会影响功能。如果要保留filter字段存Django标识，只需要在react-table配置中开启manualFilters: true关闭客户端自动过滤即可，不会触发找不到对应过滤规则的报错。

2. 外置过滤器适配问题 #

你的独立过滤器场景不需要耦合react-table的列内置过滤能力，按以下逻辑实现即可：

• 在外层公共父组件维护过滤参数状态filterParams，结构对齐后端要求的参数格式，示例结构：

  // 示例结构，可根据Django的参数要求调整
  const [filterParams, setFilterParams] = useState([
    { column: 'status', operator: 'iexact', value: 'active' }
  ])
  

• 将filterParams和修改状态的方法setFilterParams传递给FilterComponent，用户修改Autocomplete选项、点击新增/删除过滤项时，直接更新filterParams状态。
• 监听filterParams状态变化，每次变更后发起AJAX请求，将filterParams转换为Django要求的查询参数格式，拿到返回的表格数据后直接喂给react-table渲染即可。
• 如果你想复用react-table的过滤状态管理能力，也可以调用react-table暴露的setFilters方法，将外置过滤器生成的过滤规则同步到react-table内部的filters状态，同时开启manualFilters: true，监听内部filters状态的变化发起请求即可，两种方案都可以实现需求。

内容的提问来源于stack exchange，提问作者PipEvangelist