React Props验证
Props是将只读属性传递到React组件的重要机制。通常需要Props在组件中正确使用。如果使用不正确，则组件可能无法正常工作。因此，需要使用Props验证来改进React组件。
Props验证是一种工具，可以帮助开发人员避免将来出现的错误和问题。这是强制正确使用组件的有用方法。它使您的代码更具可读性。 React组件使用特殊属性 PropTypes ，该属性通过验证通过prop传递的值的数据类型来帮助您捕获错误，尽管不必使用propTypes定义组件。但是，如果将propTypes与组件一起使用，则可以帮助您避免意外的错误。
Props验证
App.propTypes 是用于在React组件中验证Props。当某些Props以无效类型传递时，您将在JavaScript控制台上收到警告。指定验证模式后，您将设置App.defaultProps。
语法:
class App extends React.Component {
render() {}
}
Component.propTypes = { /*Definition */};
ReactJSProps验证器
ReactJSProps验证器包含以下验证器列表。
| PropsType |
说明 |
| PropTypes.any |
Props可以是任何数据类型。 |
| PropTypes.array |
Props应该是一个数组。 |
| PropTypes.bool |
Props应该是布尔值。 |
| PropTypes.func |
Props应该是一个功能。 |
| PropTypes.number |
Props应该是数字。 |
| PropTypes.object |
Props应该是物体。 |
| PropTypes.string |
Props应该是字符串。 |
| PropTypes.symbol |
Props应该是象征。 |
| PropTypes.instanceOf |
Props应该是特定JavaScript类的实例。 |
| PropTypes.isRequired |
必须提供Props。 |
| PropTypes.element |
Props必须是元素。 |
| PropTypes.node |
Props可以渲染任何东西: 数字，字符串，元素或包含这些类型的数组(或片段)。 |
| PropTypes.oneOf() |
Props应该是几种特定值中的一种。 |
| PropTypes.oneOfType([PropTypes.string，PropTypes.number]) |
Props应该是可以是多种类型之一的物体。 |
示例
在这里，我们正在创建一个App组件，其中包含我们需要的所有Props。在此示例中， App.propTypes 用于Props验证。为了进行Props验证，您必须添加以下行: 从 App.js文件中的"Props类型" 导入Props类型。
App.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class App extends React.Component {
render() {
return (
<div>
<h1>ReactJS Props validation example</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: "lidihuo",
}
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: 是要再次验证的componentName。
示例
var Component = React.createClass({
App.propTypes = {
customProp: function(props, propName, componentName) {
if (!item.isValid(props[propName])) {
return new Error('Validation failed!');
}
}
}
})
