时间戳

首页 > 解决方案 > 如何让 HOC 对覆盖道具做出反应？

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

问题描述

我在 HOC 上的道具似乎并没有压倒一切。我觉得这可能是我正在使用的符号。这是我现在所拥有的。

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

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

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

标签： javascriptreactjshigher-order-components

解决方案

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

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

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

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

关于术语的小问题，您的代码片段中没有任何内容是高阶组件。HOC 使用一个 React 组件并返回一个新的 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);

推荐阅读