组件的Props类型检查与默认值 - 图1

概述

在React中要是没有使用某一类静态语言的时候,。我们要想在组件的 props 上进行类型检查，我们可以使用prop-types库达到这个目的，使用起来很简单，下面我们就简单的看看如何指定props的类型和默认值,更多内容可以去库的首页去看。主要对比prop-types在Js和Ts是怎杨的。

组件(JS语言)

函数组件

// 引入prop-types库 需要先npm 安装
import PropTypes from "prop-types";
import React from "react";
function HelloWorld(props) {
  return <h1>Hello, {props.name}</h1>;
}
//定义props类型
HelloWorld.propTypes = {
  //规定name 为string类类型
  name: PropTypes.string.isRequired
};
//定义props默认值
HelloWorld.defaultProps = {
  name: "helloworld"
};
export default HelloWorld;

我们只需要在函数组件的方法名上添加propTypes来指定props的类型或者是否是必须的,上面的代码中，我们定义了一个类型为string的name prop,并且该prop是必须的(就是在使用该组件时候必须要传入,否则在控制台有错误提示)，并且为该prop设置了一个默认值，当存在默认值的时候，在使用该组件的时候，isRequired就失效了。
下面我们在另外一个组件引入HelloWorld组件来测试下这个prop-types库的功能。

import React from "react";
import HelloWorld from "./HelloWorld";
function App() {
  //传入一个非string的 name prop，看看控制台提示什么
  return <HelloWorld name={666}></HelloWorld>;
}
export default App;

我们在使用HelloWorld组件的时候，传入了一个数字类型的name prop为666，控制台提示如下;

我们可以看到控制台有提示错误，但是程序没有报错,还是显示正确的结果,prop-types不会阻止程序，只会在控制台提示，并且这个提示只会在开发模式下有。

Class组件

使用Class组件实现Props的类型检查和默认值和函数组件差不多一样，也是在组件名上添加propTypes和defaultProps属性,不过在指定默认值的方式上，Class组件支持另一种指定默认值的写法，前提是装了transform-class-properties 的 Babel 转换工具就可以在 React 组件类中声明 defaultProps 作为静态属性。

import PropTypes from "prop-types";
import React from "react";
class HelloWorld extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
HelloWorld.propTypes = {
  name: PropTypes.string.isRequired
};
HelloWorld.defaultProps = {
  name: "helloWorld"
};
export default HelloWorld;

或者(装了transform-class-properties 的 Babel 转换工具 )

import PropTypes from "prop-types";
import React from "react";
class HelloWorld extends React.Component {
  //props 默认值
  static defaultProps = {
    name: "helloWorld"
  };
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
HelloWorld.propTypes = {
  name: PropTypes.string.isRequired
};
export default HelloWorld;

就不用再测试了，和函数组件是一样的。

补充

propsTypes 类型检查发生在 defaultProps 赋值后，所以类型检查也适用于 defaultProps。要是defaultProps的props类型和propsTypes不一支，也会在浏览器控制台给出提示，如下

import PropTypes from "prop-types";
import React from "react";
class HelloWorld extends React.Component {
  static defaultProps = {
    // number类型和propTypes定义的string类型不一致
    name: 123
  };
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
HelloWorld.propTypes = {
  name: PropTypes.string.isRequired
};
export default HelloWorld;

控制台

组件(TS语言)

因为Ts给函数组件和Class组件添加了Props类型，所以我们就需要看看props默认值该怎么写。

函数组件

import React from 'react';
type PropsType = { name: string };
const defaultProps: PropsType = {
  name: 'Hello World22',
};
const HelloWorld = (props: PropsType) => {
  return <div>{props.name}</div>;
};
HelloWorld.defaultProps = defaultProps;
export default HelloWorld;

上面的代码给函数组件HelloWorld 添加了默认prop name,注意我们给defaultProps的类型规定了和props一样的类型PropsType(上面代码定义的),要是我们的Props类型是引入其他地方的话,我们就很被动，需要写出所有的约束，其实我们可以不用给默认Props指定类型，只要确保最后的Props约束里面包含这些默认值的约束就Ok,所以我们可以换一种写法如下，这种写法对于Class组件也是一样的

import React from 'react';
//类型的交叉类型 
type PropsType = { age: number } & typeof defaultProps;
const defaultProps = {
  name: "Hello World"
};
const HelloWorld = (props: PropsType) => {
  return <div>{props.name}</div>;
};
HelloWorld.defaultProps = defaultProps;
export default HelloWorld;

Class组件

import React from 'react';
//类型的交叉类型 
type PropsType = { age: number } & typeof HelloWorld.defaultProps;
class HelloWorld extends React.Component<PropsType>{
    static defaultProps = {
        name: "Hello World"
      }
    render(){
        return <div>{this.props.name}</div>;
    }
}
export default HelloWorld;

只能通过静态属性来定义Props默认值

总结

上面就是通过Ts来开发组件指定Props的默认值。