Question

我有一个具有以下默认道具的高阶物品：

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

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

当我尝试从<InnerBox />中进行相同操作时：

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

它不起作用。我为定义其他默认组件的原因是因为该组件是由路由器生成的（在另一个文件上设置的），所以我无法像下面这样从外部将道具传递给它：

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

我该如何解决？

Answer 1

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

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);
  }
}

或者您或者您根本不使用defaultProps。

要么：

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

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

无论如何，您必须修复HOC。 InnerBox无法处理包装的组件。HOC需要考虑包装的组件。

Answer 2

由于您的高阶框取决于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 3

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

    function DisplayLists(&$list1,&$list2,&$list3)
        {
            echo $list1['name']." : ";
            for($i=0;$i<sizeof($list1)-1;$i++) echo"$list1[$i]";
            echo"<br/>";
            echo $list2['name']." : ";
            for($i=0;$i<sizeof($list2)-1;$i++) echo"$list2[$i]";
            echo"<br/>";
            echo $list3['name']." : ";
            for($i=0;$i<sizeof($list3)-1;$i++) echo"$list3[$i]";
            echo"<br/>";
            echo"<hr/>";
        }

而且，将您的HOC与InnerBox一起使用时：

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

希望这会有所帮助

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

3 个答案: