Guías de Make it Real
Search…
React Context
El API de contexto nos permite compartir valores y funcionalidades a través del árbol de componentes sin necesidad de usar
props.Creando un contexto
Para crear un contexto hay que usar la función
React.createContext. React.createContext recibe como argumento el valor predeterminado del contexto.Es posible crear tantos contextos como sea necesario.
1
const Context = React.createContext({ count: 0, setCount: () => {} });
Copied!
Al crear un contexto se crea un objeto que consta de dos partes,
Context.Provider y Context.Consumer.Context Provider
El Context.Provider es un componente que recibe un
prop value que serán los valores a compartir. Todos los componentes renderizados dentro de este componente tendran acceso a los valores del contexto.1
const App = () => {
2
const [count, setCount] = React.useState(0);
3
4
return (
5
<Context.Provider
6
value={{
7
count,
8
setCount
9
}}
10
>
11
<Component>
12
</Context.Provider>
13
);
14
}
Copied!
Los valores del contexto en este caso serían
count y setCount creados previamente usando el hook useState. Tanto Component como sus hijos van a poder acceder a estos valores.Consumir los valores del contexto
Al consumir un contexto, React busca el
Provider más cercano para consumir su valor. En caso de no encontrar un Provider, el valor será el valor predeterminado al crear el contexto. Existen 3 formas de consumir los valores contexto:Context Consumer
Consumer es el componente que nos permite consumir los valores del contexto usando una técnica llamada Render Props.Este método se puede usar tanto en componentes clase como en componentes función.
1
const Component = () => {
2
return (
3
<Context.Consumer>
4
{(value) => {
5
return (
6
<div>
7
<span>{value.count}</span>
8
<button
9
type="button"
10
onClick={() => value.setCount(value.count + 1)}
11
>
12
Click
13
</button>
14
</div>
15
);
16
}}
17
<Context.Consumer>
18
)
19
}
Copied!
Render Props renderiza una función en vez de un componente y recibe como argumento los valores del contexto.useContext hook
Es posible consumir los valores del contexto y almacenar los valores en una variable usando el hook
useContext. useContext recibe como argumento el contexto que se desea consumir.Usando este método es posible consumir varios contextos desde un mismo componente.
1
const Component = () => {
2
const context = useContext(Context);
3
4
return (
5
<div>
6
<span>{context.count}</span>
7
<button
8
type="button"
9
onClick={() => context.setCount(context.count + 1)}
10
>
11
Click
12
</button>
13
</div>
14
)
15
}
Copied!
Método estatico contextType
La última forma de consumir los valores de un contexto es usando el método estático
contextType.Este método solo está disponible para componentes clase y solo es posible consumir un contexto a la vez.
1
class Component extends React.Component {
2
static contextType = Context;
3
4
render() {
5
return (
6
<div>
7
<span>{this.context.count}</span>
8
<button
9
type="button"
10
onClick={() => this.context.setCount(this.context.count + 1)}
11
>
12
Click
13
</button>
14
</div>
15
);
16
}
17
}
18
19
// Otra manera de definir métodos estáticos
20
21
class Componente extends React.Component {
22
render() {
23
return (
24
<div>
25
<span>{this.context.count}</span>
26
<button
27
type="button"
28
onClick={() => value.setCount(this.context.count + 1)}
29
>
30
Click
31
</button>
32
</div>
33
);
34
}
35
}
36
37
Component.contextType = Context
Copied!
Last modified 2yr ago