Comment paramétrer les accessoires par défaut de composant composant React

Question

J’ai utiliser le code ci-dessous pour définir les accessoires par défaut sur un composant de réagir, mais il ne fonctionne pas. Dans la `` méthode, je peux voir la sortie « indéfini les accessoires » était affiché sur la console de navigateur. Comment est-ce que je peux définir une valeur par défaut pour les accessoires composant ?

Answer 1

Vous avez oublié de fermer la `` support.

<div class="snippet" data-babel="true" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code">

</div></div>

Answer 2

Pour ceux utilisant quelque chose comme babel stade 2 ou transformer les classes et les propriétés:

import React, { PropTypes, Component } from 'react';

export default class ExampleComponent extends Component {
   static contextTypes = {
      // some context types
   };

   static propTypes = {
      prop1: PropTypes.object
   };

   static defaultProps = {
      prop1: { foobar: 'foobar' }
   };

   ...

}

---

Mise à jour

Que de Réagir v15.5, PropTypes a été déplacé hors de la main de Réagir Paquet (lien):

import PropTypes from 'prop-types';

Modifier

Comme l'a souligné @johndodo, static des propriétés de la classe ne sont pas réellement une partie de l'ES7 spec, mais plutôt sont actuellement pris en charge uniquement par babel. Mis à jour pour refléter ce fait.

Answer 3

D'abord vous avez besoin de séparer votre classe à partir de la prolongation ex, vous ne peut pas s'étendre AddAddressComponent.defaultProps dans la class , au lieu de passer à l'extérieur.

Je vais vous recommandons également de lire sur le Constructeur et Réagir du cycle de vie: voir le Composant Spécifications et Cycle de vie

Voici ce que vous voulez:

import PropTypes from 'prop-types';

class AddAddressComponent extends React.Component {
  render() {
    let { provinceList, cityList } = this.props;
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props');
    }
  }
}

AddAddressComponent.contextTypes = {
  router: PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

export default AddAddressComponent;

Answer 4

Vous pouvez également utiliser Destructuring affectation.

J’aime cette approche que vous n’avez pas besoin d’écrire beaucoup de code.

Answer 5

utiliser un defaultProps statiques comme :

Tiré de : https://github.com/facebook/react-native/issues/1772

Si vous souhaitez vérifier les types, voir comment utiliser PropTypes dans de treyhakanson ou Ilan Hasanov de répondre, ou d’examiner les nombreuses réponses dans le lien ci-dessus.