如何使临时反应覆盖道具？

Question

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

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包装器组件还需要将所有道具传递给它正在包装的组件。

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

关于术语，您的代码片段中没有任何东西是更高级的组件。HOCs使用一个反应组件，并返回一个新的反应组件。

举个例子：

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} />