React属性验证propTypes用法介绍 – ReactJS实战教程

上一章ReactJS实战教程请查看：React属性props用法详解

props是将只读属性传递给React组件的重要机制。通常需要在组件中正确使用props，如果没有正确地使用它，则组件的行为可能不符合预期。因此，需要使用道具验证来改进react组件。

props验证是一种工具，可以帮助开发人员避免将来的错误和问题。这是一种强制正确使用组件的有效方法，它使你的代码更具可读性。React组件使用特殊属性PropTypes，通过验证通过props传递的值的数据类型来帮助你捕获bug，尽管没有必要使用propTypes定义组件。但是，如果你在组件中使用propTypes，它可以帮助您避免意外的bug。

属性验证propTypes

App.proptypes用于react组件中的props验证。当一些props使用无效类型传递时，你将在JavaScript控制台得到警告。在指定验证模式之后，将设置App.defaultProps。

语法:

class App extends React.Component {  
          render() {}  
}  
Component.propTypes = { /*定义*/};  

ReactJS Props验证器

ReactJS Props验证器包含以下验证器列表。

例子

这里，我们创建了一个App组件，它包含了我们需要的所有道具。在本例中，App.propTypes用于道具验证。对于属性验证，你必须在App.js文件中添加这一行: import PropTypes from ‘prop-types’。

App.js

import React, { Component } from 'react';  
import PropTypes from 'prop-types';  
class App extends React.Component {  
   render() {  
      return (  
          <div>  
              <h1>ReactJS Props验证例子</h1>  
              <table>  
                  <tr>  
                      <th>Type</th>  
                      <th>Value</th>  
                      <th>Valid</th>  
                  </tr>  
                <tr>  
                      <td>Array</td>  
                      <td>{this.props.propArray}</td>  
                      <td>{this.props.propArray ? "true" : "False"}</td>  
                  </tr>  
                  <tr>  
                      <td>Boolean</td>  
                      <td>{this.props.propBool ? "true" : "False"}</td>  
                      <td>{this.props.propBool ? "true" : "False"}</td>  
                  </tr>  
                  <tr>  
                      <td>Function</td>  
                      <td>{this.props.propFunc(5)}</td>  
                      <td>{this.props.propFunc(5) ? "true" : "False"}</td>  
                  </tr>  
                  <tr>  
                      <td>String</td>  
                      <td>{this.props.propString}</td>  
                      <td>{this.props.propString ? "true" : "False"}</td>  
                  </tr>  
                  <tr>  
                      <td>Number</td>  
                      <td>{this.props.propNumber}</td>  
                      <td>{this.props.propNumber ? "true" : "False"}</td>  
                  </tr>  
             </table>  
        </div>  
        );  
   }  
}  
App.propTypes = {  
    propArray: PropTypes.array.isRequired,  
    propBool: PropTypes.bool.isRequired,  
    propFunc: PropTypes.func,  
    propNumber: PropTypes.number,  
    propString: PropTypes.string,   
}  
App.defaultProps = {  
    propArray: [1,2,3,4,5],  
    propBool: true,  
    propFunc: function(x){return x+5},  
    propNumber: 1,  
    propString: "srcmini",  
}  
export default App;  

main.js

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

ReactJS定制验证器

ReactJS允许创建一个自定义验证函数来执行自定义验证。下面的参数用于创建自定义验证函数。

• props: 它应该是组件中的第一个参数。
• propName: 要验证的是propName。
• componentName: 它是要再次验证的组件名。

例子

var Component = React.createClass({  
App.propTypes = {  
   customProp: function(props, propName, componentName) {  
        if (!item.isValid(props[propName])) {  
          return new Error('验证失败!');  
        }  
      }  
   }  
})