Tutoriel de base ReactJS

ReactJS 道具验证

La validation des propriétés est une méthode efficace pour utiliser correctement les composants. Cela aidera à éviter les erreurs et les problèmes futurs pendant le développement, une fois que l'application devient plus grande. Elle rend également le code plus lisible, car nous pouvons voir comment chaque composant doit être utilisé.

Validation des propriétés

Dans cet exemple, nous utilisons toutes les propriétés nécessaires pour créer le composant App. App.propTypes est utilisé pour la validation des propriétés. Si certaines propriétés ne sont pas utilisées avec le type correct attribué, nous recevons un avertissement dans la console. Après avoir spécifié le mode de validation, nous définissons App.defaultProps.

App.jsx

import　React　from　'react';
class App extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h3Array: {this.props.propArray}/h3>
　　　　　　　　　　　　<h3Bool: {this.props.propBool ? "True..." : "False..."}/h3>
　　　　　　　　　　　　<h3Func: {this.props.propFunc(3}/h3>
　　　　　　　　　　　　<h3Number: {this.props.propNumber}/h3>
　　　　　　　　　　　　<h3String: {this.props.propString}/h3>
　　　　　　　　　　　　<h3Object: {this.props.propObject.objectName}1}</h3>
　　　　　　　　　　　　<h3Object: {this.props.propObject.objectName}2}</h3>
　　　　　　　　　　　　<h3Object: {this.props.propObject.objectName}3}</h3>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
App.propTypes　=　{
　　　propArray:　React.PropTypes.array.isRequired,
　　　propBool:　React.PropTypes.bool.isRequired,
　　　propFunc:　React.PropTypes.func,
　　　propNumber:　React.PropTypes.number,
　　　propString:　React.PropTypes.string,
　　　propObject:　React.PropTypes.object
}
App.defaultProps　=　{
　　　propArray:　[1,2,3,4,5],
　　　propBool:　true,
　　　propFunc:　function(e){return　e},
　　　propNumber:　1,
　　　propString:　"String　value...",
　　　
　　　propObject:　{
　　　　　　objectName1:"objectValue1",
　　　　　　objectName2:　"objectValue2",
　　　　　　objectName3:　"objectValue3"
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/,	document.getElementById('app'));

ReactJS 组件API ReactJS 道具