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

相关推荐
玉宇夕落6 分钟前
详细流式输出学习
前端
秃头披风侠_郑12 分钟前
【uniapp】一文让你学会微信小程序+APP+H5全平台实战指南
前端·微信小程序·uni-app
嘟嘟071712 分钟前
从零搞懂 RAG 文档处理:逐行拆解 Loader 和 Splitter,一行代码背后发生了什么
前端
geovindu12 分钟前
CSharp: Recursion Algorithm
开发语言·后端·算法·c#·递归算法
come1123415 分钟前
Vue 3 与现代 JavaScript 常用语法指南
前端·javascript·vue.js
dsyyyyy110116 分钟前
用JavaScript实现排序算法
开发语言·javascript·排序算法
槑有老呆18 分钟前
从零搭建 LLM 流式对话前端:一文读懂 SSE、二进制流与 Vue 3 响应式
前端·javascript
没落英雄18 分钟前
7. 从零开始搭建一个 AI Agent —— UI 卡片渲染系统
前端·人工智能·架构
前端缘梦22 分钟前
LangGraph 核心特性技术详解:流式输出、持久化、记忆体系与中断实战。
前端·人工智能·程序员
张龙68724 分钟前
前端错误监控生产级方案:从 onerror 捕获到 Source Map 精准还原
前端·javascript