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

相关推荐
张小姐的猫2 分钟前
【AI大模型接入SDK】 —— SQLite上手
linux·开发语言·c++·人工智能·python·log4j
不羁的木木3 分钟前
给鸿蒙 App 增加打开外部网页能力 —— flutter_web_browser 的鸿蒙使用指南
前端·flutter·harmonyos
广州山泉婚姻8 分钟前
微服务时代,前后端分离架构该怎样高效协同?
前端·后端
EatFan12 分钟前
多租户系统到底怎么设计?从 tenant_id 到 JWT 租户隔离的真实实践
前端·后端·全栈·多租户
计算机魔术师18 分钟前
硅谷四大AI巨头联手踩刹车,是真心怕失控还是怕被超越?
前端
溪语流沙19 分钟前
【Python项目实战】部署上线:把博客发布到云服务器
服务器·开发语言·python
岁岁种桃花儿26 分钟前
Vue组件第六篇:Vue单文件组件
开发语言·前端·javascript·vue.js
yivifu29 分钟前
创建支持交叉链接且鼠标悬停显示注释框的HTML文件
前端·javascript·html
朽棘不雕34 分钟前
Qt项目代码解释
开发语言·qt
计算机毕设定制辅导-无忧学长42 分钟前
《基于Java的旧物回收管理系统设计与实现》
java·开发语言