如何更改 React 中高阶组件的过滤方法？

Question

当用 HOC 包装组件时，我将如何更改组件的过滤方法？例如假设：

const LoaderHOC = (WrappedComponent) => {
  return class LoaderHOC extends Component{
    render(){
      <WrappedComponent {...this.props} />
    }
  }
}
export default LoaderHOC;

现在有一个无状态组件，类似于这样的东西：

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

现在我是否可以通过使用 HOC 将结果组件中的 filter(item<20) 更改为 filter(item=20) 之类的东西？

Answer 1

您可以通过传递比较函数来做到这一点

const defaultComparator = (item) => {
    return item > 20;
}
const FilterHOC = (Component, comparator=defaultComparator) => {
   return (props) => {
        <div>
            {props.results.filter(comparator).map((item,index)=>
               <div>
                 <Component/>
               </div>
            )}
        </div>;
   }
}

然后你就可以像

一样使用它了

const Comp = FilterHOC(SomeOtherComponent, (item) => {
    return item === 20
})

如何更改 React 中高阶组件的过滤方法？

How to change the filter method of a higher order component in React?

reactjs

higher-order-components

react-props