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,
}
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" />
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.
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;
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.
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.
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.
Pour un type de fonction prop, vous pouvez utiliser le code suivant:
AddAddressComponent.defaultProps = {
callBackHandler: () => {}
};
AddAddressComponent.propTypes = {
callBackHandler: PropTypes.func,
};
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} }) => {
...
};