La API de contexto de React puede ser usada para proporcionar el estado de toda, o parte, de una aplicación de React. Como se mostrará en esta guía, esto se hace utilizando la función createContext para definir el contexto, un componente Provider en el que envolver el árbol de componentes que requiere acceso al contexto. Luego, dentro de un componente se puede utilizar un componente Consumer, un miembro de la clase context o el gancho useContext para acceder al estado.
Ejemplo
Un buen ejemplo de dónde el contexto de reacción puede ser un buen enfoque es cuando se utiliza un tema para los componentes. Casi todos los componentes necesitarán diferentes partes del tema y se necesitará una opción para cambiar el tema actual.
Estos componentes dan una idea de cómo se podría implementar esto al pasar el tema como utilería. Para centrarse en cómo crear y utilizar un Contexto de Reacción, este ejemplo será bastante simple y utilizará un pequeño árbol de componentes, pero debería ser bastante fácil imaginar cómo se vería esto en un árbol profundamente anidado.
App
12345678910111213141516171819202122232425262728293031323334const darkTheme ={ nombre: "oscuro", fondoColor: "#282c34", color: "blanco", linkColor: "#61dafb", logoFondo: "blanco",};const lightTheme ={ nombre: "light", backgroundColor: "white", color: "#282c34", linkColor: "#61dafb", logoFondo: "red",};const availableThemes =[darkTheme, lightTheme];constApp=()=>{const[selectedTheme, setSelectedTheme]=Reaccionar. useState(darkTheme);constselectTheme=nombre={{[}]};{const theme = availableThemes. find(theme={; theme.name=== nombre);if(theme){setSelectedTheme(theme);}};return(<div className="app" style={{{ backgroundColor: selectedTheme.backgroundColor, color: selectedTheme. color}};};Cabecera selectedTheme={selectedTheme} disponibleThemes={availableThemes.map(theme=§; theme.name)} selectTheme={selectTheme}/&;};Cuerpo selectedTheme={selectedTheme}/&;};Pie de página selectedTheme={selectedTheme}/&;};javascript
Cabecera
12345678910111213constHeader=props=={{{{{]};(<header className="app-header" style={{{{{bordesColor: props.selectedTheme.backgroundColor, color: props.selectedTheme.color}}{{{{{]};span};{`Tema actual: ${props.selectedTheme. name}`}</span><div className="app-menu"--> {props.availableThemes.map(theme=§;(<ThemeItem key={theme} selectedTheme={props.selectedTheme} themeName={theme} select={()=§; props.selectTheme(theme)}/>))}</div></header>);javascript
ThemeItem
1234constThemeItem=props={{{{{botón estilo={{{color: props.selectedTheme.linkColor}} onClick={props.select};{props.themeName}</botón};);javascript
Cuerpo
1234constBody=props=={{i};(<div className="app-body"`;<LogotipoFondo={props.selectedTheme.logoBackground}/{i};javascript
Pie de página
1234constFooter=props==...;(<footer className="app-footer"³;<span;{props.selectedTheme.name}</span></footer;);javascript
En los ejemplos de esta guía, el estado se maneja usando el API de los ganchos. Esto también podría lograrse utilizando los componentes de clase.
En el código anterior, el componente de la aplicación (en la parte superior del árbol) almacena una lista de temas disponibles, y el tema actual en su estado. Luego los pasa, junto con una función para cambiar el tema actual, a sus hijos, que a su vez usan estos accesorios y/o los pasan a sus hijos. Esto podría simplificarse un poco usando el contexto.