时间戳

首页 > 解决方案 > 如何覆盖高阶组件的默认道具？

javascript - 如何覆盖高阶组件的默认道具？

问题描述

我有一个具有这些默认道具的高阶：

defaultProps = {
    className: null,
    duration: 400
};

现在我有另一个组件，例如<InnerBox />使用这个高阶组件作为扩展。如何从<InnerBox />高阶组件的 defaultProps 值中覆盖？

当我尝试从内部做同样的事情时<InnerBox />：

static defaultProps = {
   className: "classnameforthiscomponent"
   duration: 300
};

它不起作用。我为 定义不同的默认组件的原因是因为该组件是由路由器生成的（即在另一个文件上设置）所以我不能从外部将道具传递给它，如下所示：

<InnerBox 
  duration={300}
  className="classnameforthiscomponent"
/>

我该如何解决这个问题？

标签： javascriptreactjsreact-routerreact-propshigher-order-components

解决方案

如何从<InnerBox />高阶组件的 defaultProps 值中覆盖？

海事组织 你不能，因为<InnerBox />不知道它是如何被调用的。

一旦它得到它props，它就不知道它们来自哪里；作为道具传递给 HOC 或 defaultProps 或其他；至少它应该是这样的。

defaultProps您可以提供将要为该 HOC 包装的组件旁边传递的能力

const wrapper = (component, defaultProps) => // your HOC

或者您的 HOC 可以使用包装组件的 defaultProps

//maybe like 
const wrapper = (component) => {
  return class {
    static defaultProps = Object.assign({}, HOC.defaultProps, component.defaultProps);
  }
}

或者你或你根本不使用defaultProps这个 HOC。

任何一个：

render(){
  let props = {
    ...defaults,
    ...InnerBox.defaultProps,
    ...this.props
  }
  return <InnerBox {...props} />;
}

或者您只是通过props, don't useHOC.defaultProps但现在包装的组件必须处理可能未定义的道具。

无论如何，您必须修复 HOC。InnerBox不能操纵它所包裹的组件。 HOC 需要考虑它所包裹的组件。

推荐阅读