Cómo usar props para pasar datos entre los componentes de React
Los componentes obtienen sus propiedades a través de accesorios. A partir del componente superior, cada componente secundario obtiene sus accesorios del componente principal. En un componente de función, lo único que se le pasa son props, y están disponibles si se agregan props
como argumento de función:
const BlogPostExcerpt = props = { return ( div h1{props.title}/h1 p{props.description}/p /div )}
En un componente de clase, las propiedades se pasan de forma predeterminada. No es necesario agregar nada especial y se puede acceder a ellas como this.props
en una instancia de Component.
import React, { Component } from 'react'class BlogPostExcerpt extends Component { render() { return ( div h1{this.props.title}/h1 p{this.props.description}/p /div ) }}
Pasar propiedades a los componentes secundarios es una excelente manera de pasar valores en la aplicación. Un componente contiene datos (tiene estado) o los recibe a través de sus propiedades.
Se complica cuando:
- Necesitas acceder al estado de un componente desde un hijo que está varios niveles más abajo (todos los hijos anteriores necesitan actuar como un paso a través, incluso si no necesitan saber el estado, lo que complica las cosas)
- Necesitas acceder al estado de un componente desde un componente completamente no relacionado.
Valores predeterminados para los accesorios
Si no se requiere algú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 como ESLint tienen la capacidad de imponer la definición de defaultProps para un componente con algunos propTypes que no se requieren explícitamente. Elchat Directorio de chats en español
Cómo se pasan los apoyos
Alizar inicial un componente, pase las propiedades de manera similar a los atributos HTML:
const desc = 'A description'//...BlogPostExcerpt description={desc} /
Pasamos el título como una cadena simple (¡algo que sólo podemos hacer con cadenas!) y la descripción como una variable.
Niños
Una propiedad especial es children
. Contiene el valor de cualquier cosa que se pase en el body
componente, por ejemplo:
BlogPostExcerpt description="{desc}" Something/BlogPostExcerpt
En este caso, dentro BlogPostExcerpt
podríamos acceder a “Algo” mirando hacia arriba this.props.children
.
Mientras que las propiedades permiten que un componente reciba propiedades de su padre, para que se le “instruya” a imprimir algunos datos, por ejemplo, el estado permite que un componente cobre vida propia y sea independiente del entorno que lo rodea.
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
Accesorios de React
Los componentes obtienen sus propiedades a través de accesorios. A partir del componente superior, cada componente secundario obtiene sus accesorios del compo
programar
es
https://aprendeprogramando.es/static/images/programar-accesorios-de-react-1843-0.jpg
2024-10-28
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente