React 专防偷组件还不认真看代码的老六同事之类型校验 propTypes

这个主要用于验证父组件传递的值是否复合类型规范

propTypes可验证的数据类型如下

on.propTypes = {
    
    
     optionalArray: PropTypes.array,//检测数组类型
     optionalBool: PropTypes.bool,//检测布尔类型
     optionalFunc: PropTypes.func,//检测函数（Function类型）
     optionalNumber: PropTypes.number,//检测数字
     optionalObject: PropTypes.object,//检测对象
     optionalString: PropTypes.string,//检测字符串
     optionalSymbol: PropTypes.symbol,//ES6新增的symbol类型
}

主要的用处是预防同事用了你的组件但他传递值数据类型有问题

我们先创建一个react项目
然后在src下的components文件夹下找到index.jsx 如果没有就自己建一个
index.jsx参开代码如下

import React from "react";
import PropTypes from "prop-types";

class compindex extends React.Component{
    
    
  static propTypes={
    
    
    title:PropTypes.string
  }
  render(){
    
    
    return (
      <div>
        PropTypes组件验证 {
    
     this.props.title }
      </div>
    )
  }
}

export default compindex;

这里我们就引入了prop-types 我们这个组件会接受一个title变量我们用PropTypes强行限制他要是字符串 string类型的
然后我们在src下的App.jsx中编写代码如下

import './App.css';
import React from "react";
import Index from "./components/index";

class App extends React.Component{
    
    
  constructor(props){
    
    
    super(props);
    this.state = {
    
    
      title: "标题"
    }
  }
 
  render(){
    
    
    return (
      <div className="App">
        <Index title = {
    
    this.state.title}/>
      </div>
    )
  }
}

export default App;

我们这里引入了Index组件然后在state中定义了一个title 然后传给Index一个title变量对应的值就是我们在state中定义的title

我们看一下界面效果
在这里插入图片描述
一切正常但现在是因为我们index中PropTypes限制的字符串类型我们App.jsx也正好传了一个字符串
那如果我们传个数字呢？
将App.jsx的state修改如下

this.state = {
    
    
    title: 333
}

在这里插入图片描述
这是我们的控制台就报错啦他在告诉你 PropTypes 约定的是string字符串类型而你传了个 numder数字类型
那如果我们不传了呢？
App.jsx修改render如下

render(){
    
    
 return (
    <div className="App">
      <Index/>
    </div>
  )
}

在这里插入图片描述我们会发现不传propTypes就没有继续去约束他的类型了
但我们要是这个变量之后要用没有组件就会报错呢？

这时就轮到isRequired登场了
index.jsx propTypes修改为如下

static propTypes={
    
    
 title:PropTypes.string.isRequired
}

在这里插入图片描述
控制台就又开始报错说这个变量不能为空了 isRequired就是一个非空验证

但又有时我们处于人道考虑有些人可能会不读我们的代码直接用我们这个组件但直接报错有点狠了

那么我们也可以写个默认值
index.jsx 整体代码更改如下

import React from "react";
import PropTypes from "prop-types";

class compindex extends React.Component{
    
    
  static defaultProps = {
    
    
    title: '标题'
  }
  static propTypes={
    
    
    title:PropTypes.string.isRequired
  }
  render(){
    
    
    return (
      <div>
        PropTypes组件验证 {
    
     this.props.title }
      </div>
    )
  }
}

export default compindex;

我们通过 defaultProps给了他哥默认值当title为空时赋值为 ‘标题’ 如果title有值 defaultProps 则不会影响他的值
在这里插入图片描述
这时控制台就不报错了 title也有值啦

React 专防偷组件还不认真看代码的老六同事之类型校验 propTypes

猜你喜欢