Посмотреть все другие ответы
Контекст предназначен для обмена данными, которые можно считать «глобальными» для дерева компонентов React, таких как текущий аутентифицированный пользователь, тема или предпочтительный язык. 1
blockquote>
Отказ от ответственности: это обновленный ответ, предыдущий использовал старый контекстный API
Он основан на принципе Consumer / Provide , Во-первых, создайте свой контекст
const { Provider, Consumer } = React.createContext(defaultValue);
Затем используйте через
{children} /* potential consumers */
и
{value => /* render something based on the context value */}
Все потребители, являющиеся потомками Провайдера будет повторно отображаться всякий раз, когда изменяется значение поддержки поставщика. Распространение от Провайдера к его Потребителям-потомкам не подлежит методу shouldComponentUpdate, поэтому потребитель обновляется даже тогда, когда компонент-предок освобождается от обновления. 1
blockquote>Полный пример, полу-псевдокод.
import React from 'react'; const { Provider, Consumer } = React.createContext({ color: 'white' }); class App extends React.Component { constructor(props) { super(props); this.state = { value: { color: 'black' }, }; } render() { return (
); } } class Toolbar extends React.Component { render() { return ( ); } }Consumer can be arbitrary levels deep
{value => The toolbar will be in color {value.color}
}