Context нужен для того, чтобы делиться данными, которые можно считать глобальными для дерева React-компонентов. Вместо того, чтобы вручную пробрасывать props через каждый уровень иерархии компонентов, Context позволяет передавать значения напрямую компонентам, которым они нужны.
Начни с создания объекта Context со значением по умолчанию:
const ThemeContext = React.createContext('luna');
Используй компонент Provider, чтобы передавать значения вниз по дереву компонентов:
class App extends React.Component {
render() {
return (
<ThemeContext.Provider value="nova">
<Toolbar />
</ThemeContext.Provider>
);
}
}
Дочерние компоненты могут получить доступ к значению Context без получения его как prop:
class ThemedButton extends React.Component {
static contextType = ThemeContext;
render() {
return <Button theme={this.context} />;
}
}
Toolbar) не нужно явно пробрасывать theme prop через дерево своих компонентовstatic contextType в классовых компонентах, чтобы потреблять ContextContext избавляет от prop drilling — утомительной практики передачи props через несколько промежуточных компонентов, которые их не используют напрямую. Это делает код чище и проще в поддержке.
Свойство static contextType позволяет классовому компоненту подписаться на одиночный Context и получить доступ к его значению через this.context без необходимости оборачивать компонент в Consumer.
Новый — ещё не проверен сообществом
Вы