Передача контекста React через HOC в обернутый компонент

Question

Есть ли способ, которым вы можете передать контекст через компонент высшего порядка React компоненту, который он оборачивает?

У меня есть HOC, который получает контекст от своего родителя и использует этот контекст для выполнения базового, обобщенного действия, а затем оборачивает дочерний компонент, который также должен получить доступ к тому же контексту для выполнения действий. Примеры:

HOC:

export default function withACoolThing(WrappedComponent) {
  return class DoACoolThing extends Component {
    static contextTypes = {
      actions: PropTypes.object,
    }

  @autobind
  doAThing() {
    this.context.actions.doTheThing();
  }

  render() {
    const newProps = {
      doAThing: this.doAThing,
    };

    return (
      <WrappedComponent {...this.props} {...newProps} {...this.context} />
    );
  }
};

Завернутый компонент:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { autobind } from 'core-decorators';
import withACoolThing from 'lib/hocs/withACoolThing';


const propTypes = {
  doAThing: PropTypes.func,
};

const contextTypes = {
  actions: PropTypes.object,
};

@withACoolThing
export default class SomeComponent extends PureComponent {

  @autobind
  doSomethingSpecificToThisComponent(someData) {
    this.context.actions.doSomethingSpecificToThisComponent();
  }

  render() {
    const { actions } = this.context;

    return (
      <div styleName="SomeComponent">
        <SomeOtherThing onClick={() => this.doSomethingSpecificToThisComponent(someData)}>Do a Specific Thing</SomeOtherThing>
        <SomeOtherThing onClick={() => this.props.doAThing()}>Do a General Thing</SomeOtherThing>
      </div>
    );
  }
}

SomeComponent.propTypes = propTypes;
SomeComponent.contextTypes = contextTypes;

Переходя {...this.context} в HOC не работает. this.context пустой {} пока обернутый компонент обернут HOC. Пожалуйста помоги? Есть ли способ передать контекст, который не предполагает передачу его в качестве реквизита?

Answer 1

Эта проблема:

Если contextTypes не определен, то контекст будет пустым объектом.

Решение:

Задавать WrappedComponent.contextTypes внутри HOC.

Объяснение:

В нефиксированном коде contextTypes за SomeComponent не устанавливается когда SomeComponent украшается @withACoolThingлюбые изменения, которые вы вносите в SomeComponent на самом деле происходит с DoACoolThing, а также contextTypes за SomeComponent никогда не устанавливается, поэтому он оказывается пустым объектом {},

Примечание:

Потому что вы расширяетесь this.context в HOC и передавая его как реквизит здесь:

<WrappedComponent {...this.props} {...newProps} {...this.context} />

Вы должны иметь такие вещи, как this.props.actions.doTheThing доступно в дочернем компоненте.