106 lines
3.5 KiB
Markdown
106 lines
3.5 KiB
Markdown
|
---
|
|||
|
title: Handling Data with Props in React
|
|||
|
localeTitle: Manejo de datos con apoyos en React
|
|||
|
---
|
|||
|
## Manejo de datos con apoyos en React
|
|||
|
|
|||
|
Los apoyos proporcionan una forma de pasar y acceder a los datos en los componentes React.
|
|||
|
|
|||
|
Los datos se pasan a los componentes React como un atributo en JSX.
|
|||
|
|
|||
|
```javascript
|
|||
|
<MyComponent someAttribute={data.value} />
|
|||
|
```
|
|||
|
|
|||
|
En JSX, las llaves indican una expresión de JavaScript que debe devolver un valor. Se accede a los datos pasados a través de accesorios en el componente definido.
|
|||
|
|
|||
|
```javascript
|
|||
|
const MyComponent = props => {
|
|||
|
<p>{props.someAttribute}</p>
|
|||
|
};
|
|||
|
```
|
|||
|
|
|||
|
Ahora veamos un ejemplo en CodePen.
|
|||
|
|
|||
|
### Empezando
|
|||
|
|
|||
|
Si aún no lo ha hecho, continúe y regístrese para obtener una [cuenta gratuita de CodePen](https://codepen.io/accounts/signup/user/free) .
|
|||
|
|
|||
|
Cree una nueva pluma seleccionando 'Crear'> 'Nueva pluma' al lado de su imagen de perfil de CodePen.
|
|||
|
|
|||
|
A continuación, agregaremos las bibliotecas adecuadas para representar nuestros componentes React.
|
|||
|
|
|||
|
Abra el panel de configuración de JavaScript seleccionando 'Configuración'> 'JavaScript'. Seleccione 'Babel' en 'Preprocesador de JavaScript'.
|
|||
|
|
|||
|
A continuación vamos a agregar nuestras bibliotecas React. Debajo de 'JavaScript externo', seleccione el menú desplegable 'Adición rápida' y agregue las bibliotecas 'React' y 'React DOM'.
|
|||
|
|
|||
|
### Usando apoyos
|
|||
|
|
|||
|
Primero vamos a definir algunos datos ficticios en nuestro archivo JavaScript.
|
|||
|
|
|||
|
```javascript
|
|||
|
const blogData = {
|
|||
|
title: 'My blog title',
|
|||
|
body: 'Arcu viverra dolor eros interdum, quis nonummy accusantium at lorem luctus iaculis.'
|
|||
|
};
|
|||
|
```
|
|||
|
|
|||
|
A continuación vamos a definir los componentes de nuestro blog.
|
|||
|
|
|||
|
```javascript
|
|||
|
const Heading = () => {
|
|||
|
return (
|
|||
|
<h1>My Blog</h1>
|
|||
|
);
|
|||
|
};
|
|||
|
|
|||
|
const Blog = props => {
|
|||
|
return (
|
|||
|
<div>
|
|||
|
<h2>{props.title}</h2>
|
|||
|
<p>{props.body}</p>
|
|||
|
</div>
|
|||
|
);
|
|||
|
};
|
|||
|
```
|
|||
|
|
|||
|
Notamos cómo usamos el objeto props para representar los valores de título y cuerpo que se pasarán al componente Blog. Los apoyos son de solo lectura o inmutables, por lo que no tenemos que preocuparnos por cambiar los valores de los apoyos.
|
|||
|
|
|||
|
Antes de escribir nuestro componente de aplicación, debemos proteger nuestro componente definiendo el tipo de variable que se transmitirá a cada prop. Definiremos esto utilizando React.PropTypes. Agregue lo siguiente a su archivo JavaScript.
|
|||
|
|
|||
|
```javascript
|
|||
|
Blog.propTypes = {
|
|||
|
title: React.PropTypes.string,
|
|||
|
body: React.PropTypes.string
|
|||
|
};
|
|||
|
```
|
|||
|
|
|||
|
Aquí estamos definiendo que los datos transmitidos a nuestro componente de Blog serán cadenas tanto para el título como para el cuerpo. Consulte [la documentación de React](https://reactjs.org/docs/typechecking-with-proptypes.html) para obtener una lista de todos los tipos de propiedades.
|
|||
|
|
|||
|
Ahora pongamos esto juntos en un componente de la aplicación y transmitamos nuestros datos.
|
|||
|
|
|||
|
```javascript
|
|||
|
const App = props => {
|
|||
|
return (
|
|||
|
<div>
|
|||
|
<Heading />
|
|||
|
<Blog title={blogData.title} body={blogData.body} />
|
|||
|
<Blog title={blogData.title} body={blogData.body} />
|
|||
|
<Blog title={blogData.title} body={blogData.body} />
|
|||
|
</div>
|
|||
|
);
|
|||
|
};
|
|||
|
```
|
|||
|
|
|||
|
Finalmente, representemos nuestra aplicación (asegúrese de agregar una etiqueta raíz `<div>` al archivo HTML):
|
|||
|
|
|||
|
```javascript
|
|||
|
ReactDOM.render(
|
|||
|
<App />,
|
|||
|
document.getElementById('root')
|
|||
|
);
|
|||
|
```
|
|||
|
|
|||
|
Ahora debería ver los componentes de nuestro blog renderizados con los datos ficticios transmitidos a través de accesorios.
|
|||
|
|
|||
|
Puedes ver un ejemplo de CodePen [aquí](https://codepen.io/trey-davis/pen/MvdZGX) .
|