位置: 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连接打印机)

  • 荣耀x30i手机有语音呼唤吗(荣耀x30i手机有多长)

    荣耀x30i手机有语音呼唤吗(荣耀x30i手机有多长)

  • 小米civi怎么设置24小时(小米civi怎么设置nfc)

    小米civi怎么设置24小时(小米civi怎么设置nfc)

  • 华为有红外遥控的机型(华为有红外遥控器的手机)

    华为有红外遥控的机型(华为有红外遥控器的手机)

  • 手机同步是什么意思

    手机同步是什么意思

  • qq群龙王标识怎么去掉(qq群龙王标识怎么开)

    qq群龙王标识怎么去掉(qq群龙王标识怎么开)

  • 内存中存放的只有程序代码吗(内存中存放的是当前正在执行的程序和所需的数据)

    内存中存放的只有程序代码吗(内存中存放的是当前正在执行的程序和所需的数据)

  • 华为哪款手机有红外线遥控功能(华为哪款手机有5g)

    华为哪款手机有红外线遥控功能(华为哪款手机有5g)

  • 苹果蓝牙耳机充电显示(苹果蓝牙耳机充不进去电怎么办 灯不亮)

    苹果蓝牙耳机充电显示(苹果蓝牙耳机充不进去电怎么办 灯不亮)

  • 闲鱼交易成功要收手续吗(闲鱼交易成功要收服务费吗)

    闲鱼交易成功要收手续吗(闲鱼交易成功要收服务费吗)

  • 毒验货要多久(毒验货准不准)

    毒验货要多久(毒验货准不准)

  • 手机怎么查看qq邮箱号(手机怎么查看qq的q龄)

    手机怎么查看qq邮箱号(手机怎么查看qq的q龄)

  • pr打开之后一直转圈怎么办(pr2019打开一直转圈)

    pr打开之后一直转圈怎么办(pr2019打开一直转圈)

  • 64v和60v控制器通用吗

    64v和60v控制器通用吗

  • qq离线请留言是隐身吗(qq离线请留言是退出账号了吗)

    qq离线请留言是隐身吗(qq离线请留言是退出账号了吗)

  • 快手频道在哪里找(快手频道在哪里关闭)

    快手频道在哪里找(快手频道在哪里关闭)

  • ps怎么保存透明格式(ps怎么保存透明背景图片jpg)

    ps怎么保存透明格式(ps怎么保存透明背景图片jpg)

  • 华为爱奇艺快进震动怎么关(华为爱奇艺快进怎么设置)

    华为爱奇艺快进震动怎么关(华为爱奇艺快进怎么设置)

  • 米家摄像头app离线(米家摄像头老是离线怎么回事)

    米家摄像头app离线(米家摄像头老是离线怎么回事)

  • 电脑怎么安装喜马拉雅(电脑 怎么安装)

    电脑怎么安装喜马拉雅(电脑 怎么安装)

  • 找回全民k歌(找回全民k歌并安装)

    找回全民k歌(找回全民k歌并安装)

  • 天正t20工具栏怎么调出来(天正t20v5.0的工具栏怎么调出来)

    天正t20工具栏怎么调出来(天正t20v5.0的工具栏怎么调出来)

  • 荣耀8x怎么开空调(荣耀8x怎么开空调遥控器)

    荣耀8x怎么开空调(荣耀8x怎么开空调遥控器)

  • 笔记本屏幕100%还是暗(笔记本屏幕100%还是暗怎么办)

    笔记本屏幕100%还是暗(笔记本屏幕100%还是暗怎么办)

  • 泰国充电需要转换器吗(泰国充电转换用德标吗)

    泰国充电需要转换器吗(泰国充电转换用德标吗)

  • linux中网络接口名称限制讲解(linux网络接口状态命令)

    linux中网络接口名称限制讲解(linux网络接口状态命令)

  • 坎伯兰岛国家海岸,美国佐治亚州 (© Wilsilver77/Getty Images Plus)(坎伯兰森林西部)

    坎伯兰岛国家海岸,美国佐治亚州 (© Wilsilver77/Getty Images Plus)(坎伯兰森林西部)

  • 小规模纳税人宾馆房屋租赁税率
  • 跨年租赁费如何处理
  • 小企业会计准则以前年度损益调整
  • 企业存货核算的内容包括
  • 常见的税收优惠
  • 房租收入如何缴税?
  • 本年利润是负数的会计分录
  • 挂账留底税额如何抵扣?
  • 公司收款收据
  • 收到违约金应缴增值税吗
  • 物业签订的合同
  • 进项多销项少
  • 风险纳税人原因查询
  • 公司名下商品房交易开具发票
  • 购入需要安装的固定资产会计科目
  • 专用发票没有写购买方电话号码
  • 投资性房地产的后续计量从成本模式转为公允价值模式的
  • 1697510302
  • 商贸公司进项税额大
  • mac qq音乐怎么下载mp3格式的音乐
  • 行政单位年底结账怎么算
  • 限额领料单属于外来原始凭证吗
  • PHP:pg_last_notice()的用法_PostgreSQL函数
  • php完整教程
  • 承包经营税率表
  • 特许权使用费属于无形资产吗
  • 最小的电视棒是多少寸
  • wordpress建网站详细教程
  • 个体户未达起征点需要申报吗
  • 为什么法律不允许安乐死
  • 白酒赠送消费税计算
  • web自动化selenium实战项目
  • php curl cookie
  • php gdb
  • tsar命令 收集服务器系统信息
  • 手把手的教
  • 个人以不动产投资成立一人有限公司
  • 织梦安装完要删除哪个文件
  • 挂靠的公司替我们交的税款如何记账?
  • 织梦安装数据库一直连接失败
  • 更正申报季度企业所得税
  • 销货方开具红字发票还用给购买方吗
  • 实际成本法如何核算
  • 办培训机构需要什么条件手续
  • 企业购买了数千亿资产
  • 期末账项调整的内容包括
  • 计提存货跌价准备计算公式
  • 开办费用怎么处理
  • 支票存根联丢失可以用回单代替么
  • 公司一般户需要纳税吗
  • 购买劳务费会计分录
  • 转账支票转账需要带什么
  • 营业外支出会影响所有者权益吗
  • 进项税认证未抵扣怎么做账
  • 应收账款周转率计算公式
  • 缴纳工会筹备金应该记什么科目
  • 什么是分表分库
  • linux和windows关系
  • centos7版本推荐
  • linux date-u
  • 安装samba服务器步骤
  • windows 10预览版
  • linux跨服务器调用shell脚本
  • Cocos2d-x3.3 Physics物理引擎模块解决了刚体穿透问题
  • 加快构建新发展格局,着力推动高质量发展心得体会
  • python编码函数
  • jquery.min.js源代码
  • 小葵花妈妈课堂开课了是什么药
  • 批处理清空文本内容
  • js设计模式有什么用
  • 使用mvc模式设计的web应用程序
  • javascript教程 csdn
  • javascript例题
  • javascript怎么定义二维数组
  • jquery单选框
  • 房产税的计税依据及税率
  • 创新税务稽查方案
  • 车船税与船舶吨税法律制度ppt
  • 国家税务总局服务中心
  • 税务打虚打骗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设