react验证参数格式类型

首先你需要下载
cnpm i prop-types 安装验证数据类型的插件；

子组件

import React, { Component } from "react";
import "./base.css";

// 引入验证格式类型的插件
import proptypeskey from "prop-types";

// 父组件
export class TestHanderClick extends Component {
  //  static defaultProps是默认的写法，人家规定这样写的，你的默认值
  static defaultProps = {
    bg: "pink",
    wi: "400px",
    he: "200px",
    cont: 2000, //默认是2000
  };

  // static propTypes固定的写法，验证格式的
  static propTypes = {
    cont: proptypeskey.number, //验证必须是数字类型的
  };

  render() {
    return (
      // 使用值
      <div
        style={{
          background: this.props.bg,
          width: this.props.wi,
          height: this.props.he,
        }}
      >
        {this.props.cont}
      </div>
    );
  }
}

export default TestHanderClick;

父组件

 {/* 父组件传递给子组件的值 */}
 <TestHanderClick cont="123"></TestHanderClick>

人家要求的是数子类型的，你传递的是字符串；
报错
index.js:1 Warning: Failed prop type: 
Invalid prop `cont` of type `string` supplied to `TestHanderClick`, expected `number`.
    in TestHanderClick (at App.js:9)

在实际的项目中，我们可能会写上几十个组件，
每个组件都引入这个
import proptypeskey from "prop-types";
感觉挺麻烦的，那么优化的步骤是？？？
其实我现在还不知道，嘻嘻~知道的小伙伴们，可以给我讲解一下哈！

react验证参数格式类型

原文：https://www.cnblogs.com/ishoulgodo/p/13538195.html