Tipos de propiedad de React

Cómo usar PropTypes para establecer el tipo requerido de un objeto

Dado que JavaScript es un lenguaje tipado dinámicamente, realmente no tenemos una manera de imponer el tipo de una variable en tiempo de compilación, y si pasamos tipos no válidos, fallarán en tiempo de ejecución o darán resultados extraños si los tipos son compatibles pero no lo que esperamos.

Flow y TypeScript ayudan mucho, pero React tiene una forma de ayudar directamente con los tipos de propiedades, e incluso antes de ejecutar el código, nuestras herramientas (editores, linters) pueden detectar cuándo estamos pasando valores incorrectos:

import PropTypes from 'prop-types'import React from 'react'class BlogPostExcerpt extends Component { render() { return ( div h1{this.props.title}/h1 p{this.props.description}/p /div ) }}BlogPostExcerpt.propTypes = { title: PropTypes.string, description: PropTypes.string}export default BlogPostExcerpt

¿Qué tipos podemos utilizar?

Estos son los tipos fundamentales que podemos aceptar:

• Matriz de tipos de propiedad
• Tipos de propiedad.bool
• Función PropTypes
• Número de PropTypes
• Objeto PropTypes
• Tipos de propiedad.cadena
• Símbolo de PropTypes

Podemos aceptar uno de dos tipos:

PropTypes.oneOfType([ PropTypes.string, PropTypes.number]),

Podemos aceptar uno de muchos valores:

PropTypes.oneOf(['Test1', 'Test2']),

Podemos aceptar una instancia de una clase:

PropTypes.instanceOf(Something)

Podemos aceptar cualquier nodo React:

PropTypes.node

o incluso cualquier tipo:Te recomendamos Mejores Opiniones y reviews

PropTypes.any

Las matrices tienen una sintaxis especial que podemos usar para aceptar una matriz de un tipo particular:

PropTypes.arrayOf(PropTypes.string)

Objetos, podemos componer propiedades de un objeto usando

PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number})

Requerimiento de propiedades

Agregar isRequireda cualquier opción PropTypes hará que React devuelva un error si falta esa propiedad:

PropTypes.arrayOf(PropTypes.string).isRequired,PropTypes.string.isRequired,

→ Consigue mi Manual para principiantes de React

Escribí 17 libros para ayudarte a convertirte en un mejor desarrollador. Descárgalos todos sin costo uniéndote a mi boletín informativo.

ÚNETE A MI CAMPAMENTO DE CODIFICACIÓN , un increíble curso de cohorte que será un gran paso adelante en tu carrera de codificación: cubre React, Next.js; próxima edición, febrero de 2025

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

Tipos de propiedad de React

Dado que JavaScript es un lenguaje tipado dinámicamente, realmente no tenemos una manera de imponer el tipo de una variable en tiempo de compilación, y si pa

programar

es

2025-01-16

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