位置: IT常识 - 正文

React组件通信-父子组件间的通信(react组件调用方法)

编辑:rootadmin
React组件通信-父子组件间的通信 文章目录React父子组件通信认识组件嵌套组件通信父传子参数验证子传父React父子组件通信认识组件嵌套

推荐整理分享React组件通信-父子组件间的通信(react组件调用方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react函数组件通信,react 不同组件间通信,react 组件传递数据,react组件写法,react 组件传递数据,react的组件通信,react的组件通信,react组建通信,内容如对您有帮助,希望把文章链接给更多的朋友!

组件之间存在嵌套关系:

在之前的案例中,我们只是创建了一个组件App;

如果我们一个应用程序将所有的逻辑都放在一个组件中,那么这个组件就会变成非常的臃肿和难以维护;

所以组件化的核心思想应该是对组件进行拆分,拆分成一个个小的组件;

再将这些组件组合嵌套在一起,最终形成我们的应用程序;

上面的嵌套逻辑如下,它们存在如下关系:

App组件是Header、Main、Footer组件的父组件;

import React, { Component } from 'react'import Header from './Header'import Main from "./Main"import Footer from './Footer'export class App extends Component { render() { return ( <div> <Header/> <Main/> <Footer/> </div> ) }}export default App

Main组件是Banner、ProductList组件的父组件

import React, { Component } from 'react'import Banner from './Banner'import ProductList from './ProductList'export class Main extends Component { render() { return ( <div> <div>Main</div> <Banner/> <ProductList/> </div> ) }}export default Main组件通信

在开发过程中,我们会经常遇到需要组件之间相互进行通信:

比如App可能使用了多个Header,每个地方的Header展示的内容不同,那么我们就需要使用者传递给Header一些数据,让其进行展示;

又比如我们在Main中一次性请求了Banner数据和ProductList数据,那么就需要传递给他们来进行展示;

也可能是子组件中发生了事件,需要由父组件来完成某些操作,那就需要子组件向父组件传递事件;

总之,在一个React项目中,组件之间的通信是非常重要的环节;

父传子

父组件在展示子组件时,可能会传递一些数据给子组件:

父组件通过 属性=值的形式来传递给子组件数据;

子组件通过 this.props 获取父组件传递过来的数据;

例如我们来看这样一个需求, 父组件将定义的数组books传递给子组件, 由子组件进行展示

React组件通信-父子组件间的通信(react组件调用方法)

将数组传递给子组件

export class App extends Component { constructor() { super() this.state = { books: [ {name: "算法导论", price: 79}, {name: "数据结构", price: 69}, {name: "漫画算法", price: 59}, ] } } render() { const { books } = this.state return ( <div> {/* 将数据传递给子组件 */} <Header books={books}/> </div> ) }}

在子组件接受父组件传递的数据

export class Header extends Component { render() { // 接受父组件传递过来的参数 const { books } = this.props return ( <div> <ul> { books.map(item => { return ( <li key={item.name}> 名称: {item.name} 价格: {item.price} </li> ) }) } </ul> </div> ) }}参数验证

对于传递给子组件的数据,有时候我们可能希望进行验证,特别是对于大型项目来说:

当然,如果你项目中默认继承了Flow或者TypeScript,那么直接就可以进行类型验证;

但是,即使我们没有使用Flow或者TypeScript,也可以通过 prop-types 库来进行参数验证;

从 React v15.5 开始,React.PropTypes 已移入另一个包中:prop-types 库

使用方法, 先在子组件中导入PropTypes, 再对传递过来的元素添加类型限制即可

import React, { Component } from 'react'// 导入PropTypesimport PropTypes from 'prop-types'export class Header extends Component { render() { const { books, name, age } = this.props return ( <div> <div>名字: {name} 年龄: {age}</div> <ul> { books.map(item => { return ( <li key={item.name}> 名称: {item.name} 价格: {item.price} </li> ) }) } </ul> </div> ) }}// 对参数添加类型的限制Header.propTypes = { // 表示传入的类型是要求一个数组, 并且必传 books: PropTypes.array.isRequired, // 传入类型string, 非必传 name: PropTypes.string, // 传入类型number, 非必传 age: PropTypes.number}export default Header

更多的验证方式,可以参考官网:https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html

比如验证数组,并且数组中包含哪些元素;

比如验证对象,并且对象中包含哪些key以及value是什么类型;

比如某个原生是必须的,使用 requiredFunc: PropTypes.func.isRequired

如果没有传递,我们希望有默认值呢?

我们使用defaultProps就可以了

Header.defaultProps = { name: "默认名称"}子传父

某些情况,我们也需要子组件向父组件传递消息:

在vue中是通过自定义事件来完成的;

在React中同样是通过props传递消息,只是让父组件给子组件传递一个回调函数,在子组件中调用这个函数即可;

我们这里来完成一个案例:

将计数器案例进行拆解;

将按钮封装到子组件中:CounterButton;

CounterButton发生点击事件,将内容传递到父组件中,修改counter的值;

演示代码

父组件传递一个事件给子组件CounterButton

import React, { Component } from 'react'import ConterButton from './c-cpn/ConterButton'export class App extends Component { constructor() { super() this.state = { conter: 100 } } changeConter(conter) { this.setState({ conter: this.state.conter + conter }) } render() { const { conter } = this.state return ( <div> <h2>{conter}</h2> {/* 向子组件中传入一个事件 */} <ConterButton getConter={conter => this.changeConter(conter)}/> </div> ) }}export default App

子组件在按钮发生点击时, 对父组件的传递的函数进行回调, 并传入一个参数出去

import React, { Component } from 'react'export class ConterButton extends Component { btnClick(conter) { // 当按钮发生点击事件时, 对父组件传递过来的函数进行回调 this.props.getConter(conter) } render() { return ( <div> <button onClick={() => this.btnClick(-1)}>-1</button> <button onClick={() => this.btnClick(1)}>+1</button> </div> ) }}export default ConterButton
本文链接地址:https://www.jiuchutong.com/zhishi/300680.html 转载请保留说明!

上一篇:订单30分钟未支付自动取消怎么实现?(订单超时十分钟)

下一篇:Win11怎么通过WinRE访问系统还原?(win11怎么通过ip连接打印机)

  • 抖音隐藏作品怎么隐藏(怎么发抖音作品?)

    抖音隐藏作品怎么隐藏(怎么发抖音作品?)

  • 苹果12无线充电多少w(苹果12无线充电怎么用不了)

    苹果12无线充电多少w(苹果12无线充电怎么用不了)

  • 手机wps为什么会闪退(手机wps为什么会显示文件为空或不存在)

    手机wps为什么会闪退(手机wps为什么会显示文件为空或不存在)

  • cod16连不上服务器(cod16连接不到服务器)

    cod16连不上服务器(cod16连接不到服务器)

  • 网易云好友拉黑的表现(网易云好友拉黑可以看动态吗)

    网易云好友拉黑的表现(网易云好友拉黑可以看动态吗)

  • 如何让qq赞隐藏(怎样把qq赞隐藏)

    如何让qq赞隐藏(怎样把qq赞隐藏)

  • qq视频电话对方没接能看到我吗(qq视频电话对方暂时无法接听是什么意思)

    qq视频电话对方没接能看到我吗(qq视频电话对方暂时无法接听是什么意思)

  • 蓝牙耳机声音太大但已经是最小值(蓝牙耳机声音太小怎么调大)

    蓝牙耳机声音太大但已经是最小值(蓝牙耳机声音太小怎么调大)

  • 第一次装宽带要不要买路由器(第一次装宽带要安装费吗)

    第一次装宽带要不要买路由器(第一次装宽带要安装费吗)

  • 支付宝扫码总提示有风险(支付宝扫码总提醒怎么办)

    支付宝扫码总提示有风险(支付宝扫码总提醒怎么办)

  • 抖音直播同城的人进不来是什么情况(抖音直播同城的人进不了直播间)

    抖音直播同城的人进不来是什么情况(抖音直播同城的人进不了直播间)

  • 看别人绿洲会有记录吗(如何观看别人绿洲隐藏的内容)

    看别人绿洲会有记录吗(如何观看别人绿洲隐藏的内容)

  • 微信语音断断续续怎么办(微信语音断断续续怎么解决)

    微信语音断断续续怎么办(微信语音断断续续怎么解决)

  • 企业微信和钉钉的区别(企业微信和钉钉打卡哪个好用)

    企业微信和钉钉的区别(企业微信和钉钉打卡哪个好用)

  • 乐视手机如何隐藏软件(乐视手机怎么隐藏桌面图标)

    乐视手机如何隐藏软件(乐视手机怎么隐藏桌面图标)

  • 华为talkback怎么操作(华为talkback怎么用)

    华为talkback怎么操作(华为talkback怎么用)

  • 独立显卡插在主板哪个槽(独立显卡插主板屏幕没反应)

    独立显卡插在主板哪个槽(独立显卡插主板屏幕没反应)

  • r15屏幕分辨率设置(r15屏幕分辨率多少)

    r15屏幕分辨率设置(r15屏幕分辨率多少)

  • 微信语音铃声怎么设置(微信语音铃声怎么换一个)

    微信语音铃声怎么设置(微信语音铃声怎么换一个)

  • 怎么升级win10系统?2019免费Win7升级win10方法图解(如何升级win10系统版本)

    怎么升级win10系统?2019免费Win7升级win10方法图解(如何升级win10系统版本)

  • 没有桌面和任务栏只有鼠标怎么办(没有桌面和任务栏怎么办)

    没有桌面和任务栏只有鼠标怎么办(没有桌面和任务栏怎么办)

  • vue 路由跳转携带参数(vue路由跳转携带参数怎么接收)

    vue 路由跳转携带参数(vue路由跳转携带参数怎么接收)

  • Python解释器有哪些种类

    Python解释器有哪些种类

  • 应纳税所得额是利润总额吗
  • 个体工商户收入怎么核定
  • 增值税发票的抵扣联丢了怎么办
  • 企业年报社保都是0人的公司
  • 子公司注销后账务如何处理
  • 公司购个人的二手车流程
  • 网上报税超过了时间还能报吗
  • 个人独资企业有章程没有
  • 金税盘一年
  • 进项税额留底月底销项税金如何结转?
  • 挂靠被查出来后挂靠费怎么处理?
  • 跨年发票企业所得税
  • 购入的工具应计入哪个科目?
  • 开公司后如何报个税申报
  • 增值税专用发票的税率是多少啊
  • 收购发票盖章盖谁的
  • 一般纳税人能否享受残保金优惠
  • 报销单里报销内容可以写送客户烟吗
  • 往年计提有误 跨年处理
  • 集体福利是否可以抵税
  • 企业风险报酬转移怎么理解
  • 免税进口种子要符合哪些条件?
  • 买车预付款怎么记账
  • 企业利息收入如何做分录
  • bios术语
  • win11和win10比较
  • 存量资金上缴国库是哪个文件规定了
  • 单位代扣公积金比例
  • 筹建期间费用如何记账
  • 外贸企业代理出口销售的出口退税手续由谁办理
  • 个人应纳税所得额是要交钱吗
  • 哈雷6号
  • js文件格式化工具
  • 招待费专票可以抵扣进项吗
  • 借应付职工薪酬贷其他应收款
  • phpunit
  • 应付职工薪酬是负数是什么意思
  • xch 未来
  • web前端修炼之道
  • linux执行php脚本
  • 总公司如何成立子公司
  • 文章初审过了
  • 汉诺塔问题动画演示
  • 国家定额发票使用范围
  • 员工备用金会计分录
  • 哪些项目不可以抵扣进项
  • 挂靠别人公司税怎么交?
  • 收到返利怎么做会计分录
  • 无形资产出售时累计摊销为什么在借方
  • 待转销项税借方余额是什么意思
  • 工程施工企业收到工程款,怎么做分录
  • 预收账款科目账龄怎么算
  • 上月有留底税额时本月缴纳税款时怎么做分录
  • 劳务报酬与经营所得
  • 收到保险公司的赔款怎么做账
  • 原材料暂估入库成本结转处理
  • 房租增值税专用发票几个点
  • 工会经费交纳
  • 专业收账公司合法吗
  • 私企做会计风险大吗
  • win10两个网络怎么选择网络
  • windows7打游戏会卡怎么办
  • apt-get update错误
  • 如何编译安装
  • Win10 Insider 10565去除快捷方式小箭头的方法
  • win10截图截不了怎么办?
  • ubuntu 8.04.1 LTS 下的cpu温度监控软件lm-sensors
  • 电脑safari点击没反应
  • win7怎么cmd
  • win10 rs3
  • 手机物理游戏
  • pyinstaller如何用
  • js == ===区别
  • python教程目录
  • 被标记为广告推销的电话能接吗
  • 税务局无编制人员工资
  • 税务局党支部党员大会会议记录
  • 八戒财税兼职
  • 种植业税收优惠政策2023
  • 电子税务局开发票流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设