React 属性验证 propTypes

React 组件可以根据预先设置进行属性验证。

React prop验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

以下实例创建一个 MyTest 组件，属性 title 是必须的且是字符串，非字符串类型会自动转换为字符串：

var title = "菜鸟教程";
// var title = 123;
class MyTest extends React.Component {render() {return (<h1>Hello, {this.props.title}</h1>);}
}MyTitle.propTypes = {title: PropTypes.string
};
ReactDOM.render(<MyTest title={title} />,document.getElementById('example')
);

以下是React 常用的一些验证器样本，写在这里方便摘抄。

MyComponent.propTypes = {// 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的myPropArray: React.PropTypes.array,myPropBool: React.PropTypes.bool,myPropFunc: React.PropTypes.func,myPropNumber: React.PropTypes.number,myPropObject: React.PropTypes.object,myPropString: React.PropTypes.string,// 可以被渲染的对象 numbers, strings, elements 或 arraymyPropNode: React.PropTypes.node,//  React 元素myPropElement: React.PropTypes.element,// 用 JS 的 instanceof 操作符声明 prop 为类的实例。myPropMessage: React.PropTypes.instanceOf(Message),// 用 enum 来限制 prop 只接受指定的值。myPropEnum: React.PropTypes.oneOf(['News', 'Photos']),// 可以是多个对象类型中的一个myPropUnion: React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.number,React.PropTypes.instanceOf(Message)]),// 指定类型组成的数组myPropArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),// 指定类型的属性构成的对象myPropObjectOf: React.PropTypes.objectOf(React.PropTypes.number),// 特定 shape 参数的对象myPropObjectWithShape: React.PropTypes.shape({color: React.PropTypes.string,fontSize: React.PropTypes.number}),// 任意类型加上 `isRequired` 来使 prop 不可空。myPropFunc: React.PropTypes.func.isRequired,// 不可空的任意类型myPropAny: React.PropTypes.any.isRequired,// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。myCustomProp: function(props, propName, componentName) {if (!/matchme/.test(props[propName])) {return new Error('Validation failed!');}}
}

React 属性验证 propTypes相关推荐

React属性与状态
React属性与状态属性和状态作为组件之间数据流动的途径. 单向数据流单向数据流:更新 DOM 的数据总是从顶层流下来,用户事件不直接操作 DOM,而是操作顶层数据.这些数据从顶层流下来同时更新了 ...
七十七、React中的propTypes，defaultProps和生命周期函数
2020/11/19. 周四.今天又是奋斗的一天. @Author:Runsen React,相比于Vue,React更加灵活,但是对JavaScript基础的要求也更高一些.我继续学习React 文 ...
[react] React中验证props的目的是什么？
[react] React中验证props的目的是什么? 对属性进行强检验,避免运行时报错我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通 ...
react 中的propTypes类型检测
咋说了,可能跟 js本身弱类型语言有关吧, 当我们的react项目越来越庞大而又复杂的时候, 特别是那种公共组件,如果不限制类型可能会千奇百怪的往里面传入一些数据, 除非你的文档中很详细描述每个 ...
java 对象视图框架_Stripes视图框架Java对象属性验证和prototype.js Ajax的测试
Stripes视图框架Java对象属性验证,它允许对字段设置是否必须填写,对数字大小进行限制等.我用prototype.js Ajax 将验证后的数据及时地展示出来,下面来看程序. 1.编写User实 ...
React属性之Refs
React属性之Refs 1 介绍 2 使用方法 2.1 createRef(版本>=React16.3) 2.2 回调Refs 2.3 String类型的Refs(已过时,不推荐使用) 2.4 ...
React系列知识——PropTypes与DefaultProps的应用
PropTypes 提供一系列验证器,可用于组件接收到的数据类型是有效的.当传入的 prop值类型不正确时,JavaScript 控制台将会显示警告,propTypes仅在开发模式下进行检查. Pro ...
React中的propTypes
在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想传递的是字符串类型'3',而传递了一 ...
React context 、PropTypes
也是初学react 看到公司项目中老是有这个PropTypes.any 来声明contextTypes 中属性半懂不懂的所以准备来一起学下给他弄明白了 PropTypes : 一个库要是不用 ...

React 属性验证 propTypes

React 属性验证 propTypes相关推荐

最新文章

热门文章