react中属性的验证

前言：

为了验证传递进来的数据是否符合我们期望的类型或者要求，React提供了PropTypes这个对象用于校验属性的类型

准备工作：

1. 首先我们要先安装一个propTypes库，脚手架命令 npm i prop-types --save
2. 接着在使用前得先引入prop-type
3. 定义好一个对象，添加属性验证

简单案列：

import React, { Component } from 'react'
//1. 引入验证库
import PropTypes from 'prop-types'; 
/* 属性的校验 */
class Name extends Component{
 // 固定 defaultProps
 static defaultProps = {
   name:"pyq"
 }
 constructor(props){
   super(props);
   console.log(props);
 }
 render(){
   return <section>{this.props.name}</section>
 }
}

class Age extends Component{
 render(){
   return <section>{this.props.age}</section>
 }
}
Age.defaultProps = {
 age:18
}
class Action extends Component{
 render(){
   return <section>{this.props.action}</section>
 }
}
// 2. 添加验证
Action.propTypes = {
//预想action的是number类型的
 action: PropTypes.number
}
export default class App extends Component {
 render() {
   return (
     <div>
         <h1>属性的验证</h1>
         <Name></Name>
         <Age></Age>
          {/* 这里传的却是字符串类型 */}
         <Action action="动弹" ></Action>
     </div>
   )
 }
}

虽然不会影响代码的运行，但控制台会抛出警告，这样就可以用来确保接收到的数据是有效的

proptypes可以校验的组件类型的属性类型表：

类型	propTypes对应的属性
String	propTypes.string
Number	propTypes.number
Boolean	propTypes.bool
Function	propTypes.func
Object	propTypes.object
Array	propTypes.array
Symbol	propTypes.symbol
Element（React元素）	propTypes.element
Node 可被渲染的节点，数字，字符串，React元素或者由这些类型的数据组成的数组）	propTypes.node