如何在React中通过高阶组件（HOC）修改被包裹组件的过滤逻辑？

嘿，这个需求其实很好实现，核心思路是让HOC接管或注入过滤逻辑，替代组件里硬编码的规则。下面给你两种实用的方案，你可以根据场景选：

方案1：给组件注入可配置的过滤函数（推荐，更灵活） #

这种方式让组件的过滤逻辑不再硬写，而是依赖从props传入的方法，HOC负责把我们想要的过滤规则传进去。

第一步：改造无状态组件Results #

把原来硬编码的filter(item<20)改成使用props传入的过滤函数，同时保留默认逻辑作为 fallback：

const Results = props => {
  // 使用props里的filterFn，没有的话用默认的(item < 20)
  const filteredResults = props.results.filter(
    props.filterFn || (item => item < 20)
  );
  
  return (
    <div>
      {filteredResults.map((item, index) => (
        <div key={index}>
          <SomeOtherComponent />
        </div>
      ))}
    </div>
  );
};
export default Results;

第二步：改造LoaderHOC，支持传入自定义过滤逻辑 #

让HOC可以接收第二个参数（自定义过滤函数），然后把它作为props传给被包裹的组件：

const LoaderHOC = (WrappedComponent, customFilterFn) => {
  return class extends Component {
    render() {
      // 把自定义过滤函数和原有props一起传给组件
      return (
        <WrappedComponent
          {...this.props}
          filterFn={customFilterFn}
        />
      );
    }
  };
};
export default LoaderHOC;

第三步：使用HOC包裹组件，传入目标过滤规则 #

现在你就可以用HOC把Results包裹成使用filter(item === 20)的新组件：

// 传入我们想要的过滤逻辑：只保留等于20的项
const FilteredResults = LoaderHOC(Results, item => item === 20);

// 之后使用这个新组件即可
<FilteredResults results={yourResultsData} />

方案2：HOC直接处理结果（更直接，适合固定修改） #

如果你的需求只是固定把过滤规则改成item === 20，也可以让HOC直接修改results后再传给组件，这样甚至不需要改动原Results组件（不过要注意原组件里的过滤逻辑需要去掉，避免重复过滤）：

改造LoaderHOC： #

const LoaderHOC = (WrappedComponent) => {
  return class extends Component {
    render() {
      // 在HOC里直接过滤results，得到我们想要的结果
      const modifiedResults = this.props.results.filter(item => item === 20);
      
      // 把修改后的results传给组件，替换原有的props.results
      return (
        <WrappedComponent
          {...this.props}
          results={modifiedResults}
        />
      );
    }
  };
};
export default LoaderHOC;

调整原Results组件（去掉内部的过滤）： #

const Results = props => (
  <div>
    {props.results.map((item, index) => (
      <div key={index}>
        <SomeOtherComponent />
      </div>
    ))}
  </div>
);
export default Results;

这样包裹后的组件就会自动使用item === 20的过滤规则啦～

内容的提问来源于stack exchange，提问作者KT-mongo