react props传参

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

一、主要功能

1.传参

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

2.验证数据类型格式

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

3.设置默认值

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

二、实例代码

javascript 复制代码
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做项目开发了,还有一些内部的组件,已经更多的传参方式可以在练习中了解。

相关推荐
念何架构之路几秒前
zap扩展生态与总结
java·前端·数据库
独孤九剑打醒他15 分钟前
【原创开源】【概念设计】源 - 栅 - 漏 - 栅 - 源 横向双栅 MOS,低压交流多值逻辑芯片探索
前端·其他·架构·开源·硬件工程
mantou1321 小时前
我给 AI Agent 做了个「油猴」:让 Claude Code / Codex 直接用你已登录的浏览器
前端·javascript·后端
默_笙1 小时前
🍕 一个主编、三个工种、两本手册:搭一支 AI 调研队
前端·javascript
纸片人1 小时前
Blender 建模 + Three.js 展示:和 AI 一起做一个光储充超充站数字孪生大屏
前端
智能直播1 小时前
网络RTMP拉流不卡顿、声音不同步?一文讲透缓冲区、时间戳与MEDAI V2实战调优
前端
第七页独白1 小时前
汽车零件厂如何通过 QMS 真正落地 IATF 16949——QMS软件系统:品质检验-内审稽核-8d客诉管理:全星质量管理软件系统
java·前端·数据库
纸片人1 小时前
只用 three.js + OpenStreetMap,手搓一个「成都城市 3D」数据大屏
前端
星若生辉1 小时前
Hugo 静态站点搭建|从本地调试到上线部署实操指南
前端
code2cat1 小时前
Java进阶篇之AtomicMarkableReference:引用还在,标记已经改变
java·开发语言·cas·并发编程·逻辑删除