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

Question

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

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

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

当我尝试在 <InnerBox />:

中做同样的事情时

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

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

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

我该如何解决这个问题？

Answer 1

由于您的高阶框依赖于 InnerBox，您应该导入它

import InnerBox from './path'

class HigherOrderBox {
  static defaultProps = {
    // here you can destruct InnerBox.defaultProps
    ...InnerBox.defaultProps,
    // or just a single property,
    duration: InnerBox.defaultProps.duration
    // and you can also have
    additionalProperty: true
  }
}

如果您不需要额外的属性，您可以定义

static defaultProps = InnerBox.defaultProps;

Answer 2

How do I overwrite from within <InnerBox /> the values of the defaultProps in my higher-order component?

imo。你不能，因为 <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);
  }
}

或者您或您根本不在此 HOC 中使用 defaultProps。

任一：

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

或者你只是通过 props，不要使用 HOC.defaultProps 但现在包装的组件必须处理可能未定义的道具。

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

Answer 3

您可以将高阶组件包装在函数中，并在其中传递道具：

export default (outerProps) => {
   return (ComposedComponent) => {
       class MyHOC extends Component {
          // inside stuff of HOC
       }
       MyHOC.defaultProps = {
          className: outerProps.className || null,
          duration: outerProps.duration || null
       }

       return MyHOC;
   }
}

并且，当您将 HOC 与 InnerBox 一起使用时：

MyHOC({ 
   className: 'my-custom-class',
   duration: 600
})(InnerBox)

希望对您有所帮助

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

How to overwrite default props of a higher order component?

javascript

reactjs

react-router

react-props

higher-order-components