Переменная (пропс), которая будет доступна в любом дочернем компоненте (Контекст)
Когда один и тотже параметр (пропс) используется дочерними компонентами, то данный пропс дублируется каждым компонентом.
class ButtonGroup extends React.Component { render() { return ( <div> <Button theme={this.props.title}>Кнопка 1</Button> <Button theme={this.props.title}>Кнопка 2</Button> <Button theme={this.props.title}>Кнопка 3</Button> </div> ); } }
Через контекст (англ. context) можно указать, что данный параметр будет доступен в любом дочернем компоненте.
// Создание контекста ("light" по умолчанию) const ThemeContext = React.createContext('light'); class ButtonGroup extends React.Component { render() { return (<div> <ThemeContext.Provider value={this.props.theme}> <Button>Кнопка 1</Button> <Button>Кнопка 2</Button> <Button>Кнопка 3</Button> </ThemeContext.Provider> </div>); } } ReactDOM.render(<ButtonGroup theme="dark" />, document.getElementById("app"));
В дочерних компонентах, указанный в <ThemeContext>
, можно получить указанный параметр через свойство {this.context}
.
class Button extends React.Component { // Получение значение контекста static contextType = ThemeContext; render() { return ( <button className={this.context}>{this.props.children}</button> ); } }
Поддержать автора
Все статьи создаются и поддерживаются одним человеком,
если вам нравится контент, вы можете поддержать автора сайта