Reaccionar PropTypes

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

Dado que JavaScript es un lenguaje escrito dinámicamente, realmente no tenemos una forma 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.

Flujo yMecanografiadoayudan mucho, pero React tiene una forma de ayudar directamente con los tipos de accesorios, e incluso antes de ejecutar el código, nuestras herramientas (editores, linters) pueden detectar cuándo estamos pasando los 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

Que tipos podemos usar

Estos son los tipos fundamentales que podemos aceptar:

  • PropTypes.array
  • PropTypes.bool
  • PropTypes.func
  • PropTypes.number
  • PropTypes.object
  • PropTypes.string
  • PropTypes.symbol

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 de React:

PropTypes.node

o incluso de cualquier tipo:

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 las propiedades de un objeto usando

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

Requerir propiedades

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

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

Descarga mi gratisReact Handbook


Más tutoriales de react: