Reaccionar apoyos

Cómo usar accesorios para pasar datos alrededor de sus componentes de React

Props es la forma en que los componentes obtienen sus propiedades. Comenzando por el componente superior, cada componente hijo obtiene sus accesorios del padre. En un componente de función, todo lo que se pasa es props, y están disponibles agregandopropscomo argumento de la función:

const BlogPostExcerpt = props => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

En un componente de clase, los accesorios se pasan de forma predeterminada. No es necesario agregar nada especial, y se puede acceder a ellos comothis.propsen una instancia de Componente.

import React, { Component } from 'react'

class BlogPostExcerpt extends Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) } }

Pasar accesorios a componentes secundarios es una excelente manera de transmitir valores en su aplicación. Un componente contiene datos (tiene estado) o recibe datos a través de sus accesorios.

Se complica cuando:

  • necesita acceder al estado de un componente desde un niño que está varios niveles hacia abajo (todos los niños anteriores deben actuar como un paso, incluso si no necesitan conocer el estado, lo que complica las cosas)
  • necesita acceder al estado de un componente desde un componente completamente no relacionado.

Valores predeterminados para accesorios

Si no se requiere ningún valor, debemos especificar un valor predeterminado para él si falta cuando se inicializa el componente.

BlogPostExcerpt.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string
}

BlogPostExcerpt.defaultProps = { title: ‘’, description: ‘’ }

Algunas herramientas comoESLinttener la capacidad de hacer cumplir la definición de defaultProps para un Componente con algunos propTypes no requeridos explícitamente.

Cómo se pasan los accesorios

Al inicializar un componente, pase los accesorios de forma similar a los atributos HTML:

const desc = 'A description'
//...
<BlogPostExcerpt title="A blog post" description={desc} />

Pasamos el título como una cadena simple (algo que podemossolamentehacer con cadenas!), y la descripción como una variable.

Niños

Un accesorio especial eschildren. Que contiene el valor de todo lo que se pasa en elbodydel componente, por ejemplo:

<BlogPostExcerpt title="A blog post" description="{desc}">
  Something
</BlogPostExcerpt>

En este caso, dentroBlogPostExcerptpodríamos acceder a "Algo" mirando hacia arribathis.props.children.

Mientras que Props permite que un componente reciba propiedades de su padre, para que se le "instruya" para que imprima algunos datos, por ejemplo, el estado permite que un componente cobre vida por sí mismo y sea independiente del entorno circundante.

Descarga mi gratisReact Handbook


Más tutoriales de react: