react中的属性验证

本是古典何须时尚 2022-05-25 09:37 183阅读 0赞

PropType导出一系列验证器，这些验证器可以用来确保接收到的数据是有效的。

*  在验证属性之前，要先安装一个propTypes库，执行npm i -S prop-types
 *  使用之前要先引入prop-type
 *  验证属性前要先定义好一个对象，添加属性验证
 *  不要忘了将定义好的对象挂载在组件上面

我们可以设定一个属性是一个特定的js类型，默认情况下，下面的这些都是可选的

PropTypes.array,
      PropTypes.bool,
      PropTypes.func,
      PropTypes.number,
      PropTypes.object,
      PropTypes.string,
      PropTypes.symbol,

看个简单的例子：

import PropTypes from 'prop-types';
    
    class Greeting extends React.Component {
      render() {
        return (
          <h1>donna, {this.props.name}</h1>
        );
      }
    }
    
    Greeting.propTypes = {
      name: PropTypes.string
    };

在这个例子中，我们使用了PropTypes字符串。当为name提供无效值时，将在JavaScript控制台中显示警告。出于性能原因，仅在开发模式中检查PropTypes。

PropTypes.node,//任何可以被渲染的节点（包括数字，字符串，元素和数组）
    PropTypes.element,//一个react 元素，也包括组件

用法和上面的相同，所以就不再举例子了

PropTypes.oneOf(['news','photos'])//限制属性在特定的数值中

嗯、看例子

将name的值限制在\['donna','leo','Mary','momo'\]中，如果给name提供值不再这个数组中，那么浏览器就会报错提示

PropTypes.oneOfType([
    PropTypes.string,
    PropType.number
    ])//限制属性可以是多种类型之一

这个用法和上面的很相似，就不再举例了

PropTypes.arrayOf(PropTypes.number)//确定类型的数组

看下面的例子

import PropTypes from 'prop-types';
    
    class Greeting extends React.Component {
      render() {
        return (
          <h1>donna, {this.props.arr}</h1>
        );
      }
    }
    
    Greeting.propTypes = {
      arr: PropTypes.arrayOf(PropTypes.object)
    };

如果arr数组里面的值的类型不是对象的类型，浏览器就会报错

PropTypes.objectOf(PropTypes.number)//确定类型的对象

用法同上，不再举例

敲黑板划重点了，下面这个据说很重要

PropTypes.shape({
      color:PropTypes.string,
      fontSize:PropTypes.number
    })
    //验证属性的样式是否符合样式的设置

用法也很简单了，嗯，看下面

上面的例子中验证了name的颜色是不是字符串格式，字号是不是设置为数字格式

看完上面的例子有没有觉得，哇偶，好简单呐，嗯。其实就是这么so easy

嗯，接收一下挑战，看个稍微难一点点的

import React, {Component} from 'react';
    import PropTypes from 'prop-types';//引入prop-type
    let propTypes = {定义一个对象，添加属性验证
        time:PropTypes.string,
        content:PropTypes.string,
        name:PropTypes.string,
        subComment:PropTypes.arrayOf(PropTypes.object)
    }
    
     export default class First extends React.Component{
        render(){
    
            let {date,time,name,content,avatar,subComment} = this.props;
    
            return <div className="first">
                <div className="wrap">
                    <div className="img"><img src={avatar}/></div>
                    <div className="ifo">
                        <p className="one"><span className="name">{name}</span><em className="time">{time}</em></p>
                        <p className="two"><span className="content">{content}</span></p>
                        <p><span><a className="rsp" href="javascript:;">回复</a></span></p>
                    </div>
                </div>
    
            </div>
        }
     }
    First.propTypes = propTypes;//将定义好的对象挂载在组件上面

React 提供了一个 isRequired 属性，其功能和html标签中'required'一致

PropTypes.func.isRequired

还是看例子吧

name必须提供值，如果没有为name提供值，那么就会报错

默认属性 Default Props

为某个属性设置默认值，如果我们在提供数据的时候没有为该值设置值，那么这个属性值就为默认值

注意：验证属性的时候，默认值也会被验证

嗯，看例子

import PropTypes from 'prop-types';
    
    class Greeting extends React.Component {
      render() {
        return (
          <h1>donna, {this.props.name}</h1>
        );
      }
    }
    Greeting.propTypes.defaultProps = {
      name:'donna'
    } 
    Greeting.propTypes = {
      name: PropTypes.string.isRequired
    };

如果我们没有为name提供值，那么name的值就是donna，同时虽然name设置了必须设置，那即便我们没有为name提供值，此时也不会报错

OK，今天就聊这些了，有些说法是我自己认为的比较合适的说法，但也不确定是否准确，如果有什么说的不妥之处，欢迎提出您的宝贵意见。