Как переписать реквизиты по умолчанию для компонента более высокого порядка?

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 в моем компоненте высшего порядка?

имо. ты не можешь, потому что <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, не используйте 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

Вы можете обернуть свой компонент более высокого порядка внутри функции и передать в него реквизиты:

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)

Надеюсь это поможет