Блог

Это может показаться глупым вопросом, но мне любопытно, возможно ли это (рекомендуется). Рассмотрим следующее:

 export default class Example extends Component {

  constructor(props){
    super(props);

    this._variable = value;
  }

  render() {
    return (<div>{this.props.children}</div>);
  }
}
  

Теперь я знаю, что могу передать this._variable дочерним элементам так, чтобы:

 this._childrenWithProps = React.Children.map(this.props.children,
    (child) => React.cloneElement(child, {
        variable:   this._variable,
    })
);
  

Теперь у любого дочернего элемента есть доступ this.props.variable . Но (и я не совсем понимаю эту концепцию) могу ли я использовать контекст или что-то похожее, чтобы иметь возможность:

 // In another component some where ... 
render() {
  // reference variable (this._variable, or variable) here

  <Example>
    // Children here ...
  </Example>
}
  

для этого используется контекст? Или я делаю что-то ужасно неправильное? по сути, я хочу ссылаться на this._variable вне элемента, но установить его внутри элемента. Возможно ли это?

Да, вы можете использовать context для передачи переменной всем потомкам компонента, но, как общее эмпирическое правило, вам следует избегать использования context, если он вам абсолютно не нужен. Контекст нарушает шаблон потока данных React и, как правило, затрудняет чтение кода, поскольку реквизиты могут быть неявными, а не явными. Согласно документам:

Использование контекста затруднит понимание вашего кода, поскольку делает поток данных менее понятным. Это похоже на использование глобальных переменных для передачи состояния через ваше приложение.

Обычно контекст лучше всего подходит для таких вещей, как информация о теме, и он также полезен в некоторых библиотеках маршрутизации. Обычно есть лучший способ передачи данных (ваш cloneElement React.Children пример on отлично подходит и является довольно распространенным фрагментом кода, который вы найдете во многих проектах React).

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

Вашему поставщику контекста нужна getChildContext функция, которая возвращает объект контекста, который вы хотите сделать доступным для всех его дочерних элементов. Вам также нужно будет объявить, что childContextTypes это такое, как свойство класса.

 class Example extends Component {

  getChildContext() {
    return { variable: 'foo' };
  }

  render() {
    return (<div>{this.props.children}</div>);
  }
}

Example.childContextTypes = {
  variable: React.PropTypes.string
};
  

Затем везде, где вы определяете компоненты, которые будут передаваться как дочерние, которые вы хотите получить в контексте, вам нужно будет добавить то же childContextTypes свойство. Он будет иметь доступ к контексту через this.context объект.

 class Child extends Component {

  render() {
    return (<div>{this.context.variable}</div>);
  }
}

Child.childContextTypes = {
  variable: React.PropTypes.string
};
  

childContextTypes Необходимо написать. Как вы можете видеть, использование контекста не всегда означает меньшее количество кода.