Usando ganchos
Os ganchos foram introduzidos em 16.8.0, portanto, o código a seguir requer uma versão mínima de 16.8.0 (role para baixo para ver o exemplo de componentes de classe). CodeSandbox Demo
1. Definir o estado pai para contexto dinâmico
Em primeiro lugar, para ter um contexto dinâmico que possa ser passado aos consumidores, usarei o estado do pai. Isso garante que eu tenha uma única fonte de verdade. Por exemplo, meu aplicativo pai terá a seguinte aparência:
const App = () => {
const [language, setLanguage] = useState("en");
const value = { language, setLanguage };
return (
...
);
};
o language
é armazenado no estado. Passaremos ambos language
e a função setter setLanguage
via contexto posteriormente.
2. Criação de um contexto
Em seguida, criei um contexto de linguagem como este:
const LanguageContext = React.createContext({
language: "en",
setLanguage: () => {}
});
Aqui estou definindo os padrões para language
('en') e umsetLanguage
função que será enviada pelo provedor de contexto ao (s) consumidor (es). Esses são apenas padrões e irei fornecer seus valores ao usar o componente de provedor no pai App
.
Note o LanguageContext
permanece o mesmo se você usar ganchos ou componentes baseados em classe.
3. Criação de um consumidor de contexto
Para que o alternador de idioma defina o idioma, ele deve ter acesso à função configurador de idioma via contexto. Pode ser parecido com isto:
const LanguageSwitcher = () => {
const { language, setLanguage } = useContext(LanguageContext);
return (
<button onClick={() => setLanguage("jp")}>
Switch Language (Current: {language})
</button>
);
};
Aqui estou apenas definindo o idioma para 'jp', mas você pode ter sua própria lógica para definir os idiomas para isso.
4. Envolvendo o consumidor em um provedor
Agora, vou renderizar meu componente de alternador de idioma em a LanguageContext.Provider
e passar os valores que devem ser enviados via contexto para qualquer nível mais profundo. É assim que meus pais se App
parecem:
const App = () => {
const [language, setLanguage] = useState("en");
const value = { language, setLanguage };
return (
<LanguageContext.Provider value={value}>
<h2>Current Language: {language}</h2>
<p>Click button to change to jp</p>
<div>
{/* Can be nested */}
<LanguageSwitcher />
</div>
</LanguageContext.Provider>
);
};
Agora, sempre que o alternador de idioma é clicado, ele atualiza o contexto dinamicamente.
CodeSandbox Demo
Usando componentes de classe
A API de contexto mais recente foi introduzida no React 16.3, que fornece uma ótima maneira de ter um contexto dinâmico. O código a seguir requer uma versão mínima de 16.3.0. CodeSandbox Demo
1. Definir o estado pai para contexto dinâmico
Em primeiro lugar, para ter um contexto dinâmico que possa ser passado aos consumidores, usarei o estado do pai. Isso garante que eu tenha uma única fonte de verdade. Por exemplo, meu aplicativo pai terá a seguinte aparência:
class App extends Component {
setLanguage = language => {
this.setState({ language });
};
state = {
language: "en",
setLanguage: this.setLanguage
};
...
}
O language
é armazenado no estado junto com um método configurador de idioma, que você pode manter fora da árvore de estados.
2. Criação de um contexto
Em seguida, criei um contexto de linguagem como este:
const LanguageContext = React.createContext({
language: "en",
setLanguage: () => {}
});
Aqui estou definindo os padrões para language
('en') e umasetLanguage
função que será enviada pelo provedor de contexto ao (s) consumidor (es). Esses são apenas padrões e irei fornecer seus valores ao usar o componente de provedor no pai App
.
3. Criação de um consumidor de contexto
Para que o alternador de idioma defina o idioma, ele deve ter acesso à função configurador de idioma via contexto. Pode ser parecido com isto:
class LanguageSwitcher extends Component {
render() {
return (
<LanguageContext.Consumer>
{({ language, setLanguage }) => (
<button onClick={() => setLanguage("jp")}>
Switch Language (Current: {language})
</button>
)}
</LanguageContext.Consumer>
);
}
}
Aqui estou apenas definindo o idioma para 'jp', mas você pode ter sua própria lógica para definir os idiomas para isso.
4. Envolvendo o consumidor em um provedor
Agora, vou renderizar meu componente de alternador de idioma em a LanguageContext.Provider
e passar os valores que devem ser enviados via contexto para qualquer nível mais profundo. É assim que meus pais se App
parecem:
class App extends Component {
setLanguage = language => {
this.setState({ language });
};
state = {
language: "en",
setLanguage: this.setLanguage
};
render() {
return (
<LanguageContext.Provider value={this.state}>
<h2>Current Language: {this.state.language}</h2>
<p>Click button to change to jp</p>
<div>
{/* Can be nested */}
<LanguageSwitcher />
</div>
</LanguageContext.Provider>
);
}
}
Agora, sempre que o alternador de idioma é clicado, ele atualiza o contexto dinamicamente.
CodeSandbox Demo