Accesorios de React

 

 

 

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 propscomo 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.propsen 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 bodycomponente, por ejemplo:

BlogPostExcerpt description="{desc}" Something/BlogPostExcerpt

En este caso, dentro BlogPostExcerptpodrí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:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. Cómo comprobar si un elemento DOM tiene una clase

Accesorios de React

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

 

Accesorios de React
Accesorios de React

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

 

 

Update cookies preferences