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";
感觉挺麻烦的,那么优化的步骤是???
其实我现在还不知道,嘻嘻~知道的小伙伴们,可以给我讲解一下哈!
作者:流年少年
出处:https://www.cnblogs.com/ishoulgodo/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/ishoulgodo/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

支付宝

微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。
分类:
react基础语法
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期