arrays - props - react proptypes install

Reaccione la matriz de tipos con forma

Question

¿Existe una forma incorporada de usar prototipos para garantizar que una matriz de objetos que se pasa a un componente sea en realidad una matriz de objetos de una forma específica?

Tal vez algo como esto?

annotationRanges: PropTypes.array(PropTypes.shape({
    start: PropTypes.number.isRequired,
    end: PropTypes.number.isRequired,
})),

¿Me estoy perdiendo algo súper obvio aquí? Parece que esto sería muy buscado.

Answer 1

Esta fue mi solución para proteger contra una matriz vacía también:

import React, { Component } from ''react'';
import { arrayOf, shape, string, number } from ''prop-types'';

ReactComponent.propTypes = {
  arrayWithShape: (props, propName, componentName) => {
    const arrayWithShape = props[propName]
    PropTypes.checkPropTypes({ arrayWithShape:
        arrayOf(
          shape({
            color: string.isRequired,
            fontSize: number.isRequired,
          }).isRequired
      ).isRequired
    }, {arrayWithShape}, ''prop'', componentName);
    if(arrayWithShape.length < 1){
      return new Error(`${propName} is empty`)
    }
  }
}

Answer 2

Hay una importación de taquigrafía ES6, puede hacer referencia. Más legible y fácil de escribir.

import React, { Component } from ''react'';
import { arrayOf, shape, number } from ''prop-types'';

class ExampleComponent extends Component {
  static propTypes = {
    annotationRanges: arrayOf(shape({
      start: number,
      end: number,
    })).isRequired,
  }

  static defaultProps = {
     annotationRanges: [],
  }
}

Answer 3

Puede usar React.PropTypes.shape() como argumento para React.PropTypes.arrayOf() :

// an array of a particular shape.
ReactComponent.propTypes = {
   arrayWithShape: React.PropTypes.arrayOf(React.PropTypes.shape({
     color: React.PropTypes.string.isRequired,
     fontSize: React.PropTypes.number.isRequired,
   })).isRequired,
}

Vea la sección de Validación de Prop de la documentación.

ACTUALIZAR

A partir de react v15.5 , el uso de React.PropTypes está en desuso y, en su lugar, se deben usar los prop-types paquete independientes:

// an array of a particular shape.
import PropTypes from ''prop-types''; // ES6 
var PropTypes = require(''prop-types''); // ES5 with npm
ReactComponent.propTypes = {
   arrayWithShape: PropTypes.arrayOf(PropTypes.shape({
     color: PropTypes.string.isRequired,
     fontSize: PropTypes.number.isRequired,
   })).isRequired,
}

Answer 4

Sí, debe usar PropTypes.arrayOf lugar de PropTypes.array en el código, puede hacer algo como esto:

import PropTypes from ''prop-types'';

MyComponent.propTypes = {
  annotationRanges: PropTypes.arrayOf(
    PropTypes.shape({
      start: PropTypes.string.isRequired,
      end: PropTypes.number.isRequired
    }).isRequired
  ).isRequired
}

También para más detalles sobre los tipos de propiedad , visite Typechecking With PropTypes aquí

Answer 5

Si debo definir los mismos tipos de props para una forma particular varias veces, me gusta resumirlo en un archivo de tipos de props de modo que si la forma del objeto cambia, solo tengo que cambiar el código en un lugar. Ayuda a secar un poco la base de código.

Ejemplo:

// Inside my proptypes.js file
import PT from ''prop-types'';

export const product = {
  id: PT.number.isRequired,
  title: PT.string.isRequired,
  sku: PT.string.isRequired,
  description: PT.string.isRequired,
};


// Inside my component file
import PT from ''prop-types'';
import { product } from ''./proptypes;


List.propTypes = {
  productList: PT.arrayOf(product)
}

Answer 6

Y ahí está ... justo debajo de mi nariz:

De los propios documentos de reacción: https://facebook.github.io/react/docs/reusable-components.html

// An array of a certain type
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),