3.3 使用properType进行类型检查

使用 PropTypes 进行类型检查

为了防止传入的数据类型错误，我们可以使用 PropTypes 进行类型检查，可以规范传入数据的类型。借用第三方库 prop-types 来解决这一问题。

命令端安装：

npm install --save prop-types

组件内引用：

import ProperTypes from "prop-types"

组件内使用：

import React from "react";
// 引入prop-types
import ProperTypes from "prop-types"
export default function Life(props){
    return (
        <>
            <h1>{props.title}</h1>
            <h1>{props.x + props.y}</h1> 
        </>
    )
}

// 组件内使用
Life.propTypes = {
    title : ProperTypes.string,//如果父组件传入的是非字符串类型的数据就会报错
    x:ProperTypes.number.isRequired,//会同时检测是否传值，及值的类型
    y:ProperTypes.number.isRequired,
    
}

在类组件中一般使用静态方法 static 方法进行定义

import React from "react";
// 引入prop-types
import ProperTypes from "prop-types"
export default class Life extends React.Component{
    static propTypes = {
        title : ProperTypes.string,//如果父组件传入的是非字符串类型的数据就会报错
        x:ProperTypes.number.isRequired,//会同时检测是否传值，及值的类型
        y:ProperTypes.number.isRequired,
    }
    static defaultProps = {
        x:50,
        y:20,
        title:"使用默认的title"
    }
    render(){
        return (
            <>
                <h1>{this.props.title}</h1>
                <h1>{this.props.x + this.props.y}</h1> 
            </>
        )
    }
}

我们还可以定义使用默认值

import React from "react";
// 引入prop-types
import ProperTypes from "prop-types"
export default  function Life(props){
    return (
        <>
            <h1>{props.title}</h1>
            <h1>{props.x + props.y}</h1> 
        </>
    )
}

// 组件内使用
Life.propTypes = {
    title : ProperTypes.string,//如果父组件传入的是非字符串类型的数据就会报错
    x:ProperTypes.number.isRequired,//会同时检测是否传值，及值的类型
    y:ProperTypes.number.isRequired,
}
//使用默认值
Life.defaultProps = {
    x:10,
    y:20,
    title:"使用默认的title"
}