Здравствуйте, вопрос новичка в react!
Пытаюсь разобраться с передачей контекста в реакте через несколько детей , но везде в статьях пример, где все компоненты созданы в глобальной области, и имеется доступ к переменной содержащей контекст, как в примере ниже..
var Context = React.createContext('123');
class FirstComponent extends React.Component{
render(){
return (
<SecondComponent />
)
}
};
class SecondComponent extends React.Component{
render(){
return (
<ThirdComponent />
)
}
};
class ThirdComponent extends React.Component{
static contextType = Context;
render(){
return <h1>{this.context.greetings}</h1>; // Ola
}
};
ReactDOM.render(
<Context.Provider value={{greetings: 'Ola'}}>
<FirstComponent />
</Context.Provider>,
document.getElementById('root')
);
Этот пример работает, но разумеется "компоненты - дети" будут больше (в плане объема кода) и держать все их в одном файле не реально, так как быть? В глобальной области в примере выше, я могу прописать в самом дальнем от вершины дерева потомке
static contextType = Context; и он его найдёт легко, т.к. переменная
Context находится в глобальной области, НО а если всех детей разнести по файлам, мы же не сможем получить доступ к этой переменной
Context в файле с самым отдалённым от верхушке ребёнком... Как быть? Через пропы передавать состояние, ну это явно не выход т.к. контекст от части и создан чтобы НЕ передавать через 10 детей пропы, может я где-то был не внимателен, или недостаточно хорошо искал, в любом случае для вас это изи решение, если конечно подскажете!
