Flask接口签名sign原理与实例代码浅析
449
2023-04-09
React教程之Props验证的具体用法（Props Validation）
React教程之Props验证的具体用法（Props Validation）
Props验证对于组件的正确使用是一种非常有用的方式。它可以避免随着你的应用的程序越来越复杂从而出现很多的bug和问题。并且，它还可以是你的程序变得更易读。
那如何对Props进行验证呢，其实很简单，React为我们提供了PropTypes以供验证使用。当我们向Props传入的数据无效（也就是向Props传入的数据类型和验证的数据类型不符）就会在控制台发出警告信息。
看下面的例子
var Propsva = React.createClass({
propTypes: {
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
},
getDefaultProps:function(){
return {
optionalArray: ['onmpw.com','——迹忆博客'],
optionalBool: true,
optionalFunc: function (arg) {
console.log(arg);
},
optionalNumber: 3,
optionalObject: {
object1: "objectvalue1",
object2: "objectvalue2",
object3: "objectvalue3",
},
optionalString: "My Onmpw",
};
},
render:function(){
return (
);
}
});
ReactDOM.render(
document.getElementById('content')
);
当然，上面这个例子是没有错误的。下面我们将上面的例子进行修改
getDefaultProps:function(){
return {
optionalArray: 'onmpw.com——迹忆博客',
optionalBool: true,
optionalFhttp://unc: function (arg) {
console.log(arg);
},
optionalNumber: 3,
optionalObject: {
object1: "objectvalue1",
object2: "objectvalue2",
object3: "objectvalue3",
},
optionalString: "My Onmpw",
};
},
然后，我们会在控制台中发现有如下的警告
Warning: Failed propType: Invalid prop `optionalArray` of type `string` supplied to `Propsva`, expected `array`.
这是一种情况，验证Props的数据类型。还有一种情况就是验证Props是否有值。看下面的代码
propTypes: {
optionalArray: React.PropTypes.array.isRequired,
optionalBool: React.PropTypes.bool.isRequired,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
},
在React.PropTypes.array和React.PropTypes.bool后面加上isRequired，表示optionalArray和optionalBool两项是必须有值的
getDefaultProps:function(){
return {
optionalFunc: function (arg) {
console.log(arg);
},
optionalNumber: 3,
optionalObject: {
object1: "objectvalue1",
object2: "objectvalue2",
object3: "objectvalue3",
},
optionalString: "My Onmpw",
};
},
在上面代码中我们将optionalArray和optionalBool去掉，然后再去浏览器中运行代码，会发现控制台报如下的错误
Warning: Failed propType: Required prop `optionalArray` was not specified in `Propsva`.
Warning: Failed propType: Required prop `optionalBool` was not specified in `Propsva`.
当然，上面只是简单的两种情况。对于Props的验证，还有很多的东西，验证的形式也有很多，具体我们可以参考React官方文档。
这里我们有一个知识点需要说明一下，就是getDefaultProps。这是默认给Props赋值。看下面的代码
var ComponentDefaultProps = React.createClass({
getDefaultProps: function() {
return {
value: 'Default Value'
};
},
render:function(){
return (
)
}
});
ReactDOM.render(
document.getElementById('content')
);
getDefaultProps()可以保证，当父级组件没有传入Props的时候，可以保证当前组件有默认的Props的值。需要注意的是，getDefaultProps的返回结果是会被缓存起来的。因此，我们可以直接使用Props，而没有必要再手动编写一些没有意义的重复的代码。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
暂时没有评论，来抢沙发吧~