freeCodeCamp/guide/spanish/react/handling-data-with-props-in-react/index.md

title	localeTitle
Handling Data with Props in React	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.

<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.

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 .

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.

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.

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.

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 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.

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):

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í .