react props传参

news2024/11/25 2:51:07

        props是父子传参的常用方法。

一、主要功能

1.传参

定义:父级组件向子级组件传递参数。

2.验证数据类型格式

定义:可以指定父组件传递过来数据为指定类型。

3.设置默认值

定义:在参数未使用时,直接默认为指定值。

二、实例代码 

import checkPropTypes from 'prop-types'
class App extends React.Component{
    //设置制定参数类型
    static propTypes = {
        title:checkPropTypes.string, 
    }
    //设置默认值
    static defaultProps = {
        title:"首页1"
    }
}

三、注意事项

1、函数式使用时,需要在函数中传参props。

2、组件内的props是不用修改的。如果想要修改,可以在组件内重新定义一个变量,直接赋值给变量,然后修改这个变量值。

3、react的传参合vue的传参逻辑相似,只是验证和设置默认值的方法不一样。

综上所述,react的传参重点就在于赋值,验证和注意内部三个点。基本上,将react这些点了解了,基本上就可以直接用react做项目开发了,还有一些内部的组件,已经更多的传参方式可以在练习中了解。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1634694.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

了解DDM/DOM在光收发器中的重要性

在光网络领域,DDM/DOM是不可或缺的技术,确保了光收发器的最佳性能和可靠性。了解 DDM/DOM 的重要性对于该领域的专业人员至关重要,因为这些技术提供了对光通信系统运行状况和功能的实时洞察。让我们深入研究 DDM/DOM 的复杂性,探索…

Deckset for Mac激活版:MD文档转幻灯片软件

Deckset for Mac是一款专为Mac用户打造的Markdown文档转幻灯片软件。它凭借简洁直观的界面和强大的功能,成为许多用户的心头好。 Deckset for Mac激活版下载 Deckset支持Markdown语法,让用户在编辑文档时无需分心于复杂的格式设置,只需专注于…

前端请求没问题,后端正常运行,但查不出数据

写代码时写得快了些,Orders.的订单状态写错了CONFIRMED 改成COMPLETED

python-pytorch官方示例Generating Names with a Character-Level RNN的部分理解0.5.03

pytorch官方示例Generating Names with a Character-Level RNN的部分理解 模型结构功能关键技术模型输入模型输出预测实现 模型结构 功能 输入一个类别名和一个英文字符,就可以自动生成这个类别,且以英文字符开始的姓名 关键技术 将字符进行one-hot编…

翻译《The Old New Thing》 - BOOL vs. VARIANT_BOOL vs. BOOLEAN vs. bool

BOOL vs. VARIANT_BOOL vs. BOOLEAN vs. bool - The Old New Thing (microsoft.com) Raymond Chen 2004年12月22日 BOOL、VARIANT_BOOL、BOOLEAN 和 bool 的比较 简要 文章讨论了在编程中表示布尔值的几种不同方式,以及它们的起源和应用场景。 正文 为何会有如此…

STM32学习和实践笔记(22):PWM的介绍以及在STM32中的实现原理

PWM是 Pulse Width Modulation 的缩写,中文意思就是脉冲宽度调制,简称脉宽调制。它是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术,其控制简单、灵活和动态响应好等优点而成为电力电子技术最广泛应用的控制方式&#xff…

Java从菜鸟到高手①

目录 1.数据类型 2.定义变量 2.1.编码方式 2.2.布尔型变量boolean 2.3.隐式类型转化和强制类型转化 2.4类型提升 3.字符串类型 4.运算符 4.1.取余 4.2. ,- 4.3逻辑运算&& || ! 4.4.位运算 4.5.条件运算符 1.数据类型 Java中&#…

特征融合篇 | YOLOv8 引入动态上采样模块 | 超过了其他上采样器

本改进已集成到YOLOv8-Magic 框架 论文名称:《Learning to Upsample by Learning to Sample》 论文地址:https://arxiv.org/abs/2308.15085 代码地址:https://github.com/tiny-smart/dysample 我们提出了 DySample,一种超轻量级且有效的动态上采样器。尽管最近基于内核的…

解决Linux CentOS 7安装了vim编辑器却vim编辑器不起作用、无任何反应

文章目录 前言一、解决vim不起作用(卸载重新安装)1.重新安装vim2.测试vim是否能正常使用 二、解决vim: error while loading shared libraries: /lib64/libgpm.so.2: file too short报错三、解决vim编辑器不能使用方向键和退格键问题 remove vim-common …

3分钟搭建专属于你的ChatGPT

本文首发于公众号 极客枫哥 ,日更分享各种好玩的软件、编程知识和个人成长故事 我是枫哥,搭建自己的 ChatGPT 是一件非常有意思的事情,你不仅可以学习到如何搭建的过程也可以将它扩展成一个收费版的 AI 网站,提供给其他人使用&…

Burp自定义插件实现请求拦截

在安全测试时,经常需要对请求进行拦截以及配置管理,以便过滤域名或路径的请求。例如:被测对象会不断收集信息(例如IP地址、设备信息)通过HTTP传给服务端。本文将介绍如何使用Burp Suite的扩展插件,通过开发…

人工 VS AGV无人搬运机器人,AGV赋能中国智能制造

agv 机器人作为智能制造的重要抓手,正在渗透到各个传统行业,成为我国制造业转型升级的焦点。未来,智能AGV将不仅仅是简单的把货物搬运到指定的位置,而是要把5G技术、大数据、物联网、云计算等贯穿于产品的设计中,让智能…

ElasticSearch总结1

目录 一、ElasticSearch介绍: 举例一: 举例二: 举例三: 二、ELK技术栈 三、Elasticsearch 的基本概念: 四、正向索引和倒排索引: 正向索引: 倒排索引: 五、Mysql和Elastics…

【设计模式】简单工厂模式(Simple Factory Pattern)

工厂模式(Factory Pattern) 用于创建不同类型的奖品对象。您可以创建一个奖品工厂,根据配置的类型来实例化相应的奖品对象。 public interface Prize {void award(); }public class MoneyPrize implements Prize {Overridepublic void awar…

国内首个图计算平台团体标准发布,创邻科技参与编撰

2024年,由中国通信标准协会批准的团体标准《大数据 图计算平台技术要求与测试方法》(编号:T/CCSA 470—2023)(下称:标准)正式实施。该标准于1月4日在全国团体标准信息平台(https://w…

贝叶斯推理导论:如何在‘任何试验之前绝对一无所知’的情况下计算概率

从左至右依次为托马斯贝叶斯、皮埃尔-西蒙拉普拉斯和哈罗德杰弗里斯——逆概率(即现在所说的客观贝叶斯分析)发展中的关键人物。[24] 历史背景 1654年,帕斯卡尔和费马共同解决了“点问题”, 创造了早期的直接概率推理理论。三十年后,雅各布伯努利将概率…

超详细的Vue脚手架

文章目录 Node.js介绍安装快速入门控制台输出使用函数模块化编程 npm包管理器介绍命令初始化命令本地安装(了解)全局安装(掌握)批量下载淘宝npm镜像(建议使用) Webpack介绍安装快速入门方式一:webpack原始方式方式二:基于NPM方式 webpack-dev-server 开发…

黑马点评(二)--商户查询缓存

目录 1.缓存更新策略1.1内存淘汰1.2超时剔除1.3主动更新 2.实现缓存和数据库的双写一致2.1Controller2.2Service2.3思路讲解 3.解决缓存穿透问题3.1出现原因3.2解决方案3.3代码实现 4.解决缓存雪崩问题4.1出现原因4.2解决方案4.3代码实现 5.解决缓存击穿问题5.1出现原因5.2解决…

Spring Cloud Security Oauth2 授权码模式

授权码存取—内存方式 获取Code Bisic认证 WebSecurityConfig 配置 Basic Auth认证 登录 数据库建表 授权码存储方式-数据库 Beanpublic AuthorizationCodeServices authorizationCodeServices() {return new JdbcAuthorizationCodeServices(dataSource);}问题 OAuth2 授…

rocketmq dashboard控制台中topic状态无法展示

现象 在使用rocketmq控制台查看topic状态和订阅状态时,出现错误和没有信息的情况。 原因 rocketmq控制台版本问题,最新版本为1.0.1,支持rocketmq5版本,如果使用rocketmq4版本的服务无法兼容对应的数据。同理1.0.0版本也无法兼容ro…