Bienvenido a nuestra comunidad, aquí vas a encontrar la respuesta a lo que necesitas.
Solución:
Usando ganchos
Los enganches se introdujeron en 16.8.0, por lo que el siguiente código requiere una versión mínima de 16.8.0 (desplácese hacia abajo para ver el ejemplo de componentes de clase). Demostración de CodeSandbox
1. Establecer el estado principal para el contexto dinámico
En primer lugar, para tener un contexto dinámico que se pueda pasar a los consumidores, usaré el estado del padre. Esto asegura que tengo una única fuente de verdad. Por ejemplo, mi aplicación principal se verá así:
const App = () =>
const [language, setLanguage] = useState("en");
const value = language, setLanguage ;
return (
...
);
;
los language se almacena en el estado. Pasaremos ambos language y la función setter setLanguage a través del contexto más tarde.
2. Creando un contexto
A continuación, creé un contexto de lenguaje como este:
// set the defaults
const LanguageContext = React.createContext(
language: "en",
setLanguage: () =>
);
Aquí estoy estableciendo los valores predeterminados para language (‘en’) y un setLanguage función que será enviada por el proveedor de contexto a los consumidores. Estos son solo valores predeterminados y proporcionaré sus valores cuando use el componente de proveedor en el padre App.
Nota la LanguageContext sigue siendo el mismo si usa ganchos o componentes basados en clases.
3. Crear un consumidor de contexto
Para que el conmutador de idioma establezca el idioma, debe tener acceso a la función de establecimiento de idioma a través del contexto. Puede verse así:
const LanguageSwitcher = () =>
const language, setLanguage = useContext(LanguageContext);
return (
);
;
Aquí solo estoy configurando el idioma en ‘jp’, pero es posible que tenga su propia lógica para configurar los idiomas para esto.
4. Envolviendo al consumidor en un proveedor
Ahora renderizaré mi componente de cambio de idioma en un LanguageContext.Provider y pasar los valores que deben enviarse a través del contexto a cualquier nivel más profundo. Así es como mi padre App parece:
const App = () =>
const [language, setLanguage] = useState("en");
const value = language, setLanguage ;
return (
Current Language: language
Click button to change to jp
/* Can be nested */
);
;
Ahora, cada vez que se hace clic en el conmutador de idioma, se actualiza el contexto de forma dinámica.
Demostración de CodeSandbox
Usando componentes de clase
La última API de contexto se introdujo en React 16.3, que proporciona una excelente manera de tener un contexto dinámico. El siguiente código requiere una versión mínima de 16.3.0. Demostración de CodeSandbox
1. Establecer el estado principal para el contexto dinámico
En primer lugar, para tener un contexto dinámico que se pueda pasar a los consumidores, usaré el estado del padre. Esto asegura que tengo una única fuente de verdad. Por ejemplo, mi aplicación principal se verá así:
class App extends Component
setLanguage = language =>
this.setState( language );
;
state =
language: "en",
setLanguage: this.setLanguage
;
...
los language se almacena en el estado junto con un método de establecimiento de idioma, que puede mantener fuera del árbol de estado.
2. Crear un contexto
A continuación, creé un contexto de lenguaje como este:
// set the defaults
const LanguageContext = React.createContext(
language: "en",
setLanguage: () =>
);
Aquí estoy estableciendo los valores predeterminados para language (‘en’) y un setLanguage función que será enviada por el proveedor de contexto a los consumidores. Estos son solo valores predeterminados y proporcionaré sus valores cuando use el componente de proveedor en el padre App.
3. Crear un consumidor de contexto
Para que el conmutador de idioma establezca el idioma, debe tener acceso a la función de establecimiento de idioma a través del contexto. Puede verse algo como esto:
class LanguageSwitcher extends Component
render()
return (
( language, setLanguage ) => (
)
);
Aquí solo estoy configurando el idioma en ‘jp’, pero es posible que tenga su propia lógica para configurar los idiomas para esto.
4. Envolviendo al consumidor en un proveedor
Ahora renderizaré mi componente de cambio de idioma en un LanguageContext.Provider y pasar los valores que deben enviarse a través del contexto a cualquier nivel más profundo. Así es como mi padre App parece:
class App extends Component
setLanguage = language =>
this.setState( language );
;
state =
language: "en",
setLanguage: this.setLanguage
;
render()
return (
Current Language: this.state.language
Click button to change to jp
/* Can be nested */
);
Ahora, cada vez que se hace clic en el conmutador de idioma, se actualiza el contexto de forma dinámica.
Demostración de CodeSandbox
La respuesta anterior de Maithani es una gran solución, pero es un componente de clase sin el uso de ganchos. Dado que React recomienda usar componentes funcionales y ganchos así que lo implementaré con useContext y useState hooks. A continuación, se explica cómo puede actualizar el contexto desde un componente secundario.
LanguageContextMangement.js
import React, useState from 'react'
export const LanguageContext = React.createContext(
language: "en",
setLanguage: () =>
)
export const LanguageContextProvider = (props) =>
const setLanguage = (language) =>
setState(...state, language: language)
const initState =
language: "en",
setLanguage: setLanguage
const [state, setState] = useState(initState)
return (
props.children
)
App.js
import React, useContext from 'react'
import LanguageContextProvider, LanguageContext from './LanguageContextManagement'
function App()
const state = useContext(LanguageContext)
return (
)
export default App
Una solución bastante simple es establecer el estado en su contexto al incluir un método setState en su proveedor así:
return (
this.setState(
language: returnVal
)
>
this.props.children
)
Y en su consumidor, llame a updateLanguage así:
// button that sets language config
{(context) =>
Comentarios y puntuaciones
Te invitamos a añadir valor a nuestra información tributando tu experiencia en las referencias.