web-dev-qa-db-fra.com

Comment spécifier un type de prop nul dans ReactJS?

J'ai un accessoire sur un composant ReactJS qui est nul ou une carte immuable.

Au bas de mon widget si j'écris:

MyComponent.propTypes = {
    myMap: React.PropTypes.instanceOf(Immutable.Map)
};

Je laisse cela ouvert à la possibilité d'être nul, non défini ou une carte.

Comment puis-je rendre cela obligatoire et de type null ou map uniquement?

https://facebook.github.io/react/docs/typechecking-with-proptypes.html

Je vois cet exemple mais je ne sais pas comment adapter la syntaxe à mes besoins ou même si cela est possible.

Edit: Si une propriété a la valeur null, elle est toujours présente, mais indéfinie signifie qu’elle n’a pas été totalement incluse.

Par exemple:

<Component id={1} data={null} />
<Component id={2} data={Immutable.Map()} />
<Component id={3} />
11
user1261710

Cette exigence ne semble pas être prise en charge par la version actuelle de React.

Reportez-vous à Réagissez le numéro 2166 pour plus de détails. Ce numéro traite de la possibilité d’une propriété isRequiredOrNull en plus de isRequired. Résultat final :

Je ne m'attendrais pas à ce que d'autres modifications soient apportées à PropTypes. Flow est devenu beaucoup plus mature récemment et, d'après ce que j'ai appris de l'équipe de React, il s'agit de la solution à long terme pour la vérification de type. Cela place les PropTypes dans le même panier de "compatibilité" en termes de priorités - comme les addons createClass ou React, ils sont toujours pris en charge, mais uniquement avec des corrections de bogues et des améliorations de performances, sans ajouter de nouvelles fonctionnalités ni changer l'API.

En d'autres termes, si vous avez besoin d'une vérification de type plus sophistiquée, utilisez Flow à la place .

8
Timo

Il est possible d'utiliser PropTypes.oneOf([null]).isRequired. Il devrait permettre null, et rien d'autre. Vous pouvez combiner cela avec n'importe quel autre type:

PropTypes.oneOfType([
  PropTypes.string.isRequired,
  PropTypes.oneOf([null]).isRequired,
]).isRequired
1
Lars Nyström

Peut-être trop tard mais ce travail pour moi est un propType personnalisé. Plus d'informations dans les documents de réaction: https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes

static propTypes = {
  myMap: function(props, propName, componentName) {
    if (props[propName] !== null && !(props[propName] instanceof Immutable.Map)) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to `' + componentName + '`. Expected null or Immutable.Map, but received ' + typeof props[propName] + '. Validation failed.'
      )
    }
  },
}
0
TomasDisk