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

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

0 голосов
/ 17 сентября 2018

У меня есть старший порядок, который имеет эти реквизиты по умолчанию: 

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

Теперь у меня есть другой компонент, например <InnerBox />, который использует этот компонент высшего порядка в качестве расширения.Как перезаписать изнутри <InnerBox /> значения defaultProps в моем компоненте высшего порядка?

Когда я попытался сделать то же самое из <InnerBox />: 

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

Это нене работаетПричина, по которой я определяю другой компонент по умолчанию для этого устройства, заключается в том, что этот компонент генерируется маршрутизатором (который настроен для другого файла), поэтому я не могу передать ему реквизиты извне, как в: 

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

Как мне решить эту проблему?

Ответы [ 3 ]

0 голосов
/ 17 сентября 2018

Как мне перезаписать из <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 должен учитывать компонент, в который он упакован.
0 голосов
/ 17 сентября 2018

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

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)

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

0 голосов
/ 17 сентября 2018

Поскольку ваше поле более высокого порядка зависит от 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;
...