web-dev-qa-db-fra.com

Comment définir les accessoires par défaut du composant sur le composant React

J'utilise le code ci-dessous pour définir les accessoires par défaut sur un composant React, mais cela ne fonctionne pas. Dans la méthode render(), je peux voir que la sortie "props non définis" a été imprimée sur la console du navigateur. Comment définir une valeur par défaut pour les accessoires du composant?

export default class AddAddressComponent extends Component {

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

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

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

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}
reactjsecmascript-6
108
Zhao Yi

Vous avez oublié de fermer le crochet Class.

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

    return (
      <div>rendered</div>
    )
  }
}

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

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

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

ReactDOM.render(
  <AddAddressComponent />,
  document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

116
Serhii Baraniuk

Pour ceux qui utilisent quelque chose comme babel stage-2 ou transform-class-properties :

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' }
   };

   ...

}

Mettre à jour

À compter de React v15.5, PropTypes a été déplacé du package React principal ( link ):

import PropTypes from 'prop-types';

Modifier

Comme l'a souligné @johndodo, les propriétés de la classe static ne font en réalité pas partie des spécifications de l'ES7, mais sont actuellement uniquement prises en charge par babel. Mis à jour pour refléter cela.

81
treyhakanson

Tout d’abord, vous devez séparer votre classe des autres extensions. Vous ne pouvez pas étendre AddAddressComponent.defaultProps dans la variable class.

Je vous recommanderai également de lire sur le cycle de vie de Constructor et React: voir Spécifications des composants et cycle de vie

Voici ce que tu veux:

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;
13
Ilanus

Vous pouvez également utiliser l'affectation Destructuring.

class AddAddressComponent extends React.Component {
  render() {

    const {
      province="insertDefaultValueHere1",
      city="insertDefaultValueHere2"
    } = this.props

    return (
      <div>{province}</div>
      <div>{city}</div>
    )
  }
}

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

7
Sam Henderson

utilisez un defaultProps statique comme:

export default class AddAddressComponent extends Component {
    static defaultProps = {
        provinceList: [],
        cityList: []
    }

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

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

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

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

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

Si vous souhaitez vérifier les types, voyez comment utiliser PropTypes dans la réponse de treyhakanson ou Ilan Hasanov, ou consultez les nombreuses réponses fournies dans le lien ci-dessus.

5
Brandon Keith Biggs

Vous pouvez définir les accessoires par défaut en utilisant le nom de la classe, comme indiqué ci-dessous.

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

Vous pouvez utiliser la méthode recommandée par React à partir de link pour plus d'informations.

3
Rohith Murali

Pour un type de fonction prop, vous pouvez utiliser le code suivant:

AddAddressComponent.defaultProps = {
    callBackHandler: () => {}
};

AddAddressComponent.propTypes = {
    callBackHandler: PropTypes.func,
};
1
Wolfack

Si vous utilisez un composant fonctionnel, vous pouvez définir des valeurs par défaut dans l'affectation de déstructuration, comme suit:

export default ({ children, id="menu", side="left", image={menu} }) => {
  ...
};
0
Brian Burns