La API de contexto es una forma ordenada de pasar estado a través de la aplicación sin tener que usar propiedades.
La API de contexto se introdujo para permitirle pasar estado (y habilitar que el estado se actualice) a través de la aplicación, sin tener que usar accesorios para ello.
El equipo de React sugiere usar props si solo tienes unos pocos niveles de hijos para pasar, porque sigue siendo una API mucho menos complicada que la API de contexto.
En muchos casos nos permite evitar el uso de Redux , simplificando mucho nuestras aplicaciones y también aprendiendo a usar React.
¿Cómo funciona?
Creas un contexto utilizando React.createContext()
, que devuelve un objeto Contexto.:
const { Provider, Consumer } = React.createContext()
Luego creas un componente contenedor que devuelve un componente Proveedor y agregas como hijos todos los componentes desde los cuales quieres acceder al contexto:
class Container extends React.Component { constructor(props) { super(props) this.state = { something: 'hey' } } render() { return ( Provider value={{ state: this.state }}{this.props.children}/Provider ) }}class HelloWorld extends React.Component { render() { return ( Container Button / /Container ) }}
He utilizado Container como nombre de este componente porque será un proveedor global. También puedes crear contextos más pequeños.
Dentro de un componente que está envuelto en un Proveedor, se utiliza un componente Consumidor para utilizar el contexto:
class Button extends React.Component { render() { return ( Consumer {context = button{context.state.something}/button} /Consumer ) }}
También puede pasar funciones a un valor de Proveedor, y esas funciones serán utilizadas por el Consumidor para actualizar el estado del contexto: Fotos Porno y actrices porno
Provider value={{ state: this.state, updateSomething: () = this.setState({something: 'ho!'})}} {this.props.children}/Provider/* ... */Consumer {(context) = ( button onClick={context.updateSomething}{context.state.something}/button )}/Consumer
Puedes ver esto en acción en este Glitch .
Puede crear múltiples contextos para distribuir su estado entre los componentes y, al mismo tiempo, exponerlo y hacerlo accesible para cualquier componente que desee.
Al utilizar varios archivos, crea el contenido en un solo archivo y lo importa en todos los lugares donde lo utiliza:
//context.jsimport React from 'react'export default React.createContext()//component1.jsimport Context from './context'//... use Context.Provider//component2.jsimport Context from './context'//... use Context.Consumer
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
La API de contexto de React
La API de contexto es una forma ordenada de pasar estado a través de la aplicación sin tener que usar propiedades.
programar
es
https://aprendeprogramando.es/static/images/programar-la-api-de-contexto-de-react-1841-0.jpg
2024-10-28