React教程9：Props验证

 

本教程由好办法汇总原创。

 

Properties验证是一个检测你组件是否正确使用的方法。它的使用让我们在开发中避免bug。另外，它使我们组件的代码更加清晰可读。

Props验证（Validating Props）

这个例子中，我们创建了一个包括了props 的叫 App 的组件。 App.propTypes 就是用来做props validation的。如果其中某些props使用的数据类型有误，我们会得到错误提示。在我们设置好验证的模式后，我们这里设置 App.defaultProps。

App.jsx

import React from 'react';

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

所有的 props 都通过正确验证，得到如图页面效果。

在propArray 和 propBool 类型中，我们加上了 isRequired 的验证。如果这两项数据不存在，我们会得到错误提示。 如果我们删除App.defaultProps 中的 propArray: [1,2,3,4,5]，我们也会得到警告提示。

如果我们设置 propArray: 1, React 会提示我们 propType 的验证错误：需要array而不是number。