ReactJS - Props验证

属性验证是强制正确使用组件的有用方法.这将有助于在开发过程中避免未来的错误和问题，一旦应用程序变大.它还使代码更具可读性，因为我们可以看到每个组件应该如何使用.

验证道具

在这个例子中，我们正在创建 App 组件，包含我们需要的所有道具. App.propTypes 用于道具验证.如果某些道具没有使用我们指定的正确类型，我们将收到控制台警告.在我们指定验证模式后，我们将设置 App.defaultProps .

App.jsx

import React from 'react';class App extends React.Component {   render() {      return (         
            
Array: {this.props.propArray}
            
Bool: {this.props.propBool ? "True..." : "False..."}
            
Func: {this.props.propFunc(3)}
            
Number: {this.props.propNumber}
            
String: {this.props.propString}
            
Object: {this.props.propObject.objectName1}
            
Object: {this.props.propObject.objectName2}
            
Object: {this.props.propObject.objectName3}
         
      );   }}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(, document.getElementById('app'));