如何让 HOC 对覆盖道具做出反应？

Question

我在 HOC 上的支持似乎没有压倒一切。我觉得好像这可能是我正在使用的符号。这是我现在拥有的。

export const HOCComponent = ({ someProp }) => (
  <ContainerComponent
    propOne={someValueOne}
    propTwo={someValueTwo}
    propThree={someValueThree)
  />
);

export const wrapperComponent = props =>(
  <HOCComponent {...props} propThree={someValueFour}/>
);

someValueFour 似乎没有覆盖 someValueThree。任何建议都会非常有帮助！谢谢。

Answer 1

交换传递的道具的顺序，这样你以后传递的任何东西都会覆盖以前传递的任何东西。

export const wrapperComponent = props =>(
  <HOCComponent propThree={someValueFour} {...props} />
);

HOCComponent 包装器组件还需要将所有 props 传递给它所包装的组件。

export const HOCComponent = (props) => (
  <ContainerComponent
    propOne={someValueOne}
    propTwo={someValueTwo}
    propThree={someValueThree}
    {...props}
  />
);

只是关于术语的次要点，您的代码片段中没有任何内容是高阶组件。 HOC 使用一个 React 组件和 return 一个新的 React 组件。

一个例子：

const withMyHOC = WrappedComponent => props => {
  // any HOC logic
  return (
    <Wrapper
      // <-- any wrapper props
    >
      <WrappedComponent
        {...props} // <-- pass props through
        // <-- override any props
      />
    </Wrapper>
  );
};

用法：

export default withMyHOC(SomeComponent);

Answer 2

我看到你没有将道具从 HOCComponent 传递到 ContainerComponent，所以 propThree 没有被覆盖。您需要将 someProp 传递给 ContainerComponent:

<ContainerComponent propOne propTwo propThree {...someProp} />

如何让 HOC 对覆盖道具做出反应？

How to get HOC in react to override props?

javascript

reactjs

higher-order-components