Réagir proptype de la matrice de la forme de la

Est-il un moyen intégré pour utilisation proptypes pour s'assurer qu'un tableau d'objets passés à un composant est en fait un tableau d'objets de forme spécifique?

Peut-être quelque chose comme ça?

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

Ai-je raté quelque chose de super évident ici? Semble que ce serait très recherché.

InformationsquelleAutor majorBummer | 2015-09-01
  1. 318

    Vous pouvez utiliser React.PropTypes.shape() comme un argument de 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,
}

    Voir le Prop Validation section de la documentation.

    Mise à JOUR

    De react v15.5, à l'aide de React.PropTypes est obsolète et le package autonome prop-types devrait être utilisée à la place :

    //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,
}
    • Il convient de souligner l'utilisation de .isRequired sur chaque propriété de React.PropTypes.shape. Je suis arrivé ici parce que j'ai à tort que, par l'utilisation .isRequired sur React.PropTypes.arrayOf, je n'ai pas besoin de l'intérieur. Pour atteindre une couverture complète de la validation, de fait, j'ai fini en l'appliquant directement à React.PropTypes.shape ainsi.
    • Oui, je faisais exactement la même chose que vous, mais il est beaucoup plus puissant pour avoir la possibilité de signaler, comme l'exige les touches que vous souhaitez. Explicite est toujours mieux que d'implicite pour moi par le chemin.
    • Cet exemple n'est pas sans validation correctement pour moi. Si la si arrayWithShape est [] (un tableau vide) Elle n'échoue pas. si arrayWithShape est {} (un objet), il échoue. Si arrayWithShape est [{dumb: 'something'}] (un tableau sans le corriger accessoires), il échoue. J'en ai besoin pour la validation échoue si arrayWithShape est un tableau vide. Je veux seulement que ça passe si c'est un tableau vide avec des objets qui ont des hélices color et fontsize. Ce qui me manque?
    InformationsquelleAutor Pierre Criulanscy
  2. 43

    Oui, vous avez besoin d'utiliser PropTypes.arrayOf au lieu de PropTypes.array dans le code, vous pouvez faire quelque chose comme ceci:

    import PropTypes from 'prop-types';

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

    Aussi pour plus de détails sur proptypes, visite le Typage Avec PropTypes ici

    • Quelle est la raison de l'ajout .isRequired à la PropTypes.la forme de l'objet?
    InformationsquelleAutor Alireza
  3. 25

    Et il est là... juste sous mon nez:

    De l'réagissent docs eux-mêmes: https://facebook.github.io/react/docs/reusable-components.html

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

    Il y a un ES6 abréviation de l'importation, vous pouvez référencer. Plus lisible et facile à saisir.

    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: [],
  }
}
    • Veuillez consulter Comment puis-je écrire une bonne réponse. Code-seules réponses sont découragés parce qu'ils n'expliquent pas comment ils résolvent le problème en question. Vous devez mettre à jour votre réponse à expliquer ce qu'il fait et comment il améliore la upvoted répond à cette question a déjà.
    InformationsquelleAutor Moewiz
  5. 1

    Si je suis pour définir la même proptypes pour une forme donnée plusieurs fois, j'aime abstraite à une proptypes fichier, de sorte que si la forme de l'objet change, je n'ai qu'à changer le code en un seul endroit. Il permet de sécher de la base de code un peu.

    Exemple:

    //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)
}
    InformationsquelleAutor Yo Wakita
  6. 0

    C'était ma solution pour se protéger contre un tableau vide ainsi:

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