guide: add context api spanish guide (#26364)
This commit is contained in:
Joseph Gilgen
committed by
Randell Dawson
Randell Dawson
parent
fbf3e83248
commit
15e877bd3c
241
guide/spanish/react/context-api/index.md
Normal file
241
guide/spanish/react/context-api/index.md
Normal file
@ -0,0 +1,241 @@
|
||||
---
|
||||
title: Context API
|
||||
localeTitle: API Context
|
||||
---
|
||||
|
||||
# API Context
|
||||
|
||||
El API Context ha sido implementado desde la versión 16.3 de React.
|
||||
|
||||
Ya existía antes, pero estaba en beta, y así no se recomendía su uso.
|
||||
|
||||
La meta del API Context es permitir los desarrolladores tener una manera fácil
|
||||
de comunicar entre los componentes cuando están separados en la aplicación.
|
||||
Esto también redujó la necesidad de "taladrar propiedades" (pasar las propiedades por varios componentes), lo cual permite un código más limpio, más fácil a mantener y más fácil a actualizar.
|
||||
|
||||
Esto llega su plena potencial cuando queremos compartir los datos que serán
|
||||
accedidos por varios componentes en la aplicación.
|
||||
|
||||
Se base en dos ideas principales: un Provider (proveedor) y un Consumer (consumidor).
|
||||
|
||||
## Provider
|
||||
|
||||
Imaginamos que queremos utilizar una tema en nuestra aplicación. Entonces varios de nuestros componentes van a consumir esta tema. Lo que queremos hacer
|
||||
es proveer una manera fácil para que los componentes pueden acceder las propiedades de la tema.
|
||||
|
||||
En un archivo creado para proveer los datos, theme-context.js, establecemos el Provider, y también el componente Consumer para que nuestros componentes lo pueden consumir.
|
||||
|
||||
```javascript
|
||||
// theme-context.js
|
||||
// Importar a createContext
|
||||
import React, { createContext, Component } from 'react';
|
||||
|
||||
// Intializamos el contexto, con su configuración por defecto
|
||||
const { Provider, Consumer } = createContext({
|
||||
theme: {
|
||||
primary: '#f44336',
|
||||
light: '#ff7961',
|
||||
dark: '#ba000d',
|
||||
darkFont: '#000',
|
||||
lightFont: '#FFF',
|
||||
},
|
||||
});
|
||||
|
||||
// Crear el clase ThemeProvider para que lo puede utilizar nuestra application
|
||||
export class ThemeProvider extends Component {
|
||||
state = {
|
||||
theme: {
|
||||
primary: '#f44336',
|
||||
light: '#ff7961',
|
||||
dark: '#ba000d',
|
||||
darkFont: '#000',
|
||||
lightFont: '#FFF',
|
||||
},
|
||||
};
|
||||
|
||||
// Pasamos el estado que acabamos de poner como el valor inicial para el
|
||||
// consumo de nuestro aplicación.
|
||||
render() {
|
||||
return <Provider value={this.state}>{this.props.children}</Provider>;
|
||||
}
|
||||
}
|
||||
|
||||
export { Consumer as ThemeConsumer };
|
||||
```
|
||||
|
||||
Y luego necesitamos inicializar nuestra aplicación con nuestro Provider.
|
||||
|
||||
```javascript
|
||||
// index.js
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './app';
|
||||
|
||||
// Importar nuestra proveedora
|
||||
import { ThemeProvider } from './theme-context';
|
||||
|
||||
// Colocando la aplicación dentro del Provider
|
||||
const rootElement = document.getElementById('root');
|
||||
ReactDOM.render(
|
||||
<ThemeProvider>
|
||||
<App />
|
||||
</ThemeProvider>,
|
||||
rootElement
|
||||
);
|
||||
```
|
||||
|
||||
## Consumer
|
||||
|
||||
En el archivo app.js, consumimos la tema utilizando el component ThemeConsumer.
|
||||
|
||||
```javascript
|
||||
// app.js
|
||||
import React from 'react';
|
||||
|
||||
import { ThemeConsumer } from './theme-context';
|
||||
|
||||
// Nuestro botón consume la tema independiente de sus componentes padres.
|
||||
// Lo importante aquí es que no necesitamos taladrar las propiedades
|
||||
const StyledButton = ({ children }) => (
|
||||
<ThemeConsumer>
|
||||
{({ theme }) => (
|
||||
<button
|
||||
style={{
|
||||
color: theme.lightFont,
|
||||
background: theme.primary,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)}
|
||||
</ThemeConsumer>
|
||||
);
|
||||
|
||||
export default () => (
|
||||
<ThemeConsumer>
|
||||
{({ theme }) => (
|
||||
<div>
|
||||
<h1 style={{ color: theme.primary }}>Themed App</h1>
|
||||
<StyledButton>Mira mi tema</StyledButton>
|
||||
</div>
|
||||
)}
|
||||
</ThemeConsumer>
|
||||
);
|
||||
```
|
||||
|
||||
### Modificar la tema dinamicamente
|
||||
|
||||
Para modificar la tema que se presenta en nuestra aplicación necesitamos proveer una función al contexto que se puede utilizar el consumidor.
|
||||
|
||||
Solo tenemos que añadirla a Provider:
|
||||
|
||||
```javascript
|
||||
// theme-context.js
|
||||
...
|
||||
// Ya estamos incluyendo un método para modificar la tema
|
||||
const { Provider, Consumer } = createContext({
|
||||
theme: {
|
||||
primary: "#f44336",
|
||||
light: "#ff7961",
|
||||
dark: "#ba000d",
|
||||
darkFont: "#000",
|
||||
lightFont: "#FFF",
|
||||
},
|
||||
setTheme: () => {},
|
||||
})
|
||||
|
||||
export class ThemeProvider extends Component {
|
||||
state = {
|
||||
theme: {
|
||||
primary: "#f44336",
|
||||
light: "#ff7961",
|
||||
dark: "#ba000d",
|
||||
darkFont: "#000",
|
||||
lightFont: "#FFF",
|
||||
},
|
||||
// Definimos la función en nuestro estado, que pasaremos como valor inicial
|
||||
// a nuestro proveedor
|
||||
setTheme: theme => this.setState({ theme }),
|
||||
}
|
||||
|
||||
// Pasamos el estado que acabamos de poner como el valor inicial para el
|
||||
// consumo de nuestro aplicación.
|
||||
render() {
|
||||
return <Provider value={this.state}>{this.props.children}</Provider>
|
||||
}
|
||||
}
|
||||
|
||||
export { Consumer as ThemeConsumer }
|
||||
```
|
||||
|
||||
Y luego en el componente consumidor:
|
||||
|
||||
```javascript
|
||||
// app.js
|
||||
import React from 'react';
|
||||
|
||||
import { ThemeConsumer } from './theme-context';
|
||||
|
||||
// Aqui modificamos el boton para utilizar el metodo de cambiar la tema
|
||||
const StyledButton = ({ children, clickHandler }) => (
|
||||
<ThemeConsumer>
|
||||
{({ theme }) => (
|
||||
<button
|
||||
onClick={clickHandler}
|
||||
style={{
|
||||
color: theme.lightFont,
|
||||
background: theme.primary,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)}
|
||||
</ThemeConsumer>
|
||||
);
|
||||
|
||||
const themes = {
|
||||
red: {
|
||||
primary: '#f44336',
|
||||
light: '#ff7961',
|
||||
dark: '#ba000d',
|
||||
darkFont: '#000',
|
||||
lightFont: '#FFF',
|
||||
},
|
||||
teal: {
|
||||
primary: '#009688',
|
||||
light: '#52c7b8',
|
||||
dark: '#00675b',
|
||||
darkFont: '#000',
|
||||
lightFont: '#FFF',
|
||||
},
|
||||
};
|
||||
|
||||
// Ya estamos incluyendo el metodo "setTheme" para permitir que el usador
|
||||
// puede cambiar la tema de la aplicación
|
||||
export default () => (
|
||||
<ThemeConsumer>
|
||||
{({ theme, setTheme }) => (
|
||||
<div>
|
||||
<h1 style={{ color: theme.primary }}>Themed App</h1>
|
||||
<StyledButton clickHandler={() => setTheme(themes.red)}>
|
||||
Hacer Tema Roja
|
||||
</StyledButton>
|
||||
<StyledButton clickHandler={() => setTheme(themes.teal)}>
|
||||
Hacer Tema Teal
|
||||
</StyledButton>
|
||||
</div>
|
||||
)}
|
||||
</ThemeConsumer>
|
||||
);
|
||||
```
|
||||
|
||||
Son cuatro ideas principales que se debe recordar:
|
||||
|
||||
- Utilizando React.createComponent, crea un componente Provider que se encargue de manejar los datos y un componente Consumer que permite que nuestros componentes pueden consumir los datos.
|
||||
- Envuelve la aplicación con nuestro Provider, para que sean disponibles los datos a nuestros componentes.
|
||||
- Envuelve nuestros componentes con el componente Consumer para que consumen los datos.
|
||||
|
||||
### More Information
|
||||
|
||||
- [React - Context Official Documentation ](https://reactjs.org/docs/context.html)
|
||||
- [Ejemplo en codesandbox](https://codesandbox.io/s/4qr6ly9wjx)
|
||||
Reference in New Issue
Block a user