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

上一章ReactJS实战教程请查看：React属性props用法详解
props是将只读属性传递给React组件的重要机制。通常需要在组件中正确使用props，如果没有正确地使用它，则组件的行为可能不符合预期。因此，需要使用道具验证来改进react组件。
props验证是一种工具，可以帮助开发人员避免将来的错误和问题。这是一种强制正确使用组件的有效方法，它使你的代码更具可读性。React组件使用特殊属性PropTypes，通过验证通过props传递的值的数据类型来帮助你捕获bug，尽管没有必要使用propTypes定义组件。但是，如果你在组件中使用propTypes，它可以帮助您避免意外的bug。
属性验证propTypesApp.proptypes用于react组件中的props验证。当一些props使用无效类型传递时，你将在JavaScript控制台得到警告。在指定验证模式之后，将设置App.defaultProps。
语法:

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

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

编号	PropsType	描述
1.	PropTypes.any	属性可以是任何数据类型。
2.	PropTypes.array	属性应该是一个数组。
3.	PropTypes.bool	属性应该是一个布尔值。
4.	PropTypes.func	属性应该是一个函数。
5.	PropTypes.number	属性应该是一个数字。
6.	PropTypes.object	属性应该是一个对象。
7.	PropTypes.string	属性应该是一个字符串。
8.	PropTypes.symbol	属性应该是一个象征。
9.	PropTypes.instanceOf	属性应该是一个特定的JavaScript类的一个实例。
10.	PropTypes.isRequired	必须提供的属性。
11.	PropTypes.element	属性必须是一个元素。
12.	PropTypes.node	属性可以使任何东西:数字、字符串、数组元素或包含这些类型(或片段)。
13.	PropTypes.oneOf()	几种类型的属性应该是特定的值。
14.	PropTypes.oneOfType([PropTypes.string,PropTypes.number])	属性应该是一个对象,可以许多类型之一。

例子
这里，我们创建了一个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: 它是要再次验证的组件名。

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

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