Domanda Reagire array di proptype con forma


Esiste un modo integrato per utilizzare i proptype per garantire che una serie di oggetti passati a un componente sia effettivamente una matrice di oggetti di una forma specifica?

Forse qualcosa del genere?

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

Mi sto perdendo qualcosa di super ovvio qui? Sembra che questo sarebbe molto ricercato.


149
2017-09-01 07:28


origine


risposte:


Puoi usare React.PropTypes.shape() come argomento a 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,
}

Vedere il Prop Validation sezione della documentazione.

AGGIORNARE

Come di react v15.5, usando React.PropTypes è deprecato e il pacchetto standalone prop-types dovrebbe essere usato invece:

// 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,
}

220
2017-09-01 08:43



Sì, è necessario utilizzare PropTypes.arrayOf invece di PropTypes.array nel codice, puoi fare qualcosa del genere:

import PropTypes from 'prop-types';

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

Per ulteriori dettagli sui proptype, visita Typechecking con PropTypes  Qui


24
2017-10-20 02:43



Ed eccolo ... proprio sotto il mio naso:

Dal react docs stessi: https://facebook.github.io/react/docs/reusable-components.html

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

20
2017-09-01 07:29



C'è un'importazione stenografica ES6, puoi fare riferimento. Più leggibile e facile da digitare.

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: [],
  }
}

3
2017-10-12 02:47



Se devo definire gli stessi proptypi per una particolare forma più volte, mi piace astrarre il file in un file proptypes in modo che se la forma dell'oggetto cambia, devo solo cambiare il codice in un unico punto. Aiuta a seccare un po 'il codice base.

Esempio:

// 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)
}

1
2017-12-12 22:35



Questa era la mia soluzione per proteggere anche contro un array vuoto:

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`)
    }
  }
}

0
2017-08-01 19:51