zoukankan      html  css  js  c++  java
  • 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,
               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";
    感觉挺麻烦的,那么优化的步骤是???
    其实我现在还不知道,嘻嘻~知道的小伙伴们,可以给我讲解一下哈!
    
    作者:流年少年
    出处:https://www.cnblogs.com/ishoulgodo/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    ios 手势加变形
    ios 懒加载
    [leetCode]1111. 有效括号的嵌套深度
    [leetCode]面试题 08.07. 无重复字符串的排列组合
    [leetCode]46. 全排列
    [leetCode]37. 解数独
    [leetCode]面试题 08.09. 括号
    torch.Tensor 与 numpy.ndarray的相互转化
    [leetCode]93. 复原IP地址
    [leetCode]15. 三数之和
  • 原文地址:https://www.cnblogs.com/ishoulgodo/p/13538195.html
Copyright © 2011-2022 走看看