Передайте опору в функции Hoc, когда эта опора находится внутри компонента - PullRequest
Новая
       28

Передайте опору в функции Hoc, когда эта опора находится внутри компонента

0 голосов
/ 26 июня 2018

Я знаю, что название странное, но позвольте мне объяснить. У меня есть компонент с реквизитом: 

const MainExperienceComponent = props => (
  <div>
    ....
  </div>
);

и затем мне нужно экспортировать его с помощью функции-обертки, подобной этой: 

export default withWrapper(MainExperienceComponent);

Проблема в том, что я хочу пройти внутрь withWrapper проп. Чтобы быть более конкретным, я хочу это: withWrapper(MainExperienceComponent, prop.id), так как withWrapper имеет два аргумента. Как это сделать?

1 Ответ

0 голосов
/ 26 июня 2018

Вы можете обернуть ваш MainExperienceComponent в класс, в котором вы хотите его использовать (тот, у которого есть реквизиты, которые вы хотите передать), и назначить его как переменную экземпляра. 

class Container extends Component {
  // inside the constructor:
  constructor(props) {
    super(props)
    this.WrappedComponent = withWrapper(MainExperienceComponent, props.id)
  }

  // or outside the constructor:

  WrappedComponent = withWrapper(MainExperienceComponent, this.props.id)

  render() {
    return (
      // Use <this.WrappedComponent /> here
    )
  }
}

Ваш HOC примет два аргумента: 

const withWrapper(WrappedComponent, id) => {
  ...
}

Предполагается, что компонент Container имеет доступ к реквизиту, который вы хотите передать. Если вы передаете реквизит id в компонент MainExperienceComponent, то HOC уже будет иметь к нему доступ.

звонящий: 

const Wrapped = withWrapper(MainExperienceComponent)
...
<Wrapped id={someId} /> // where does someId come from?

УВК: 

const withWrapper = (WrappedComponent) => {
  class NewComponent extends Component {
    // you have access to `this.props.id`
    render() {
      return <WrappedComponent />
    }
  }

  return NewComponent
}

Если бы это было так, не было бы необходимости передавать два аргумента в HOC, поэтому я не уверен, что это отвечает на ваш вопрос. Дайте мне знать, если я неправильно понимаю.

...