面试题-React(七):React组件通信

在React开发中,组件通信是一个核心概念,它使得不同组件能够协同工作,实现更复杂的交互和数据传递。常见的组件通信方式:父传子和子传父

一、父传子通信方式

父组件向子组件传递数据是React中最常见的一种通信方式。这种方式适用于将数据从一个上层组件传递到其直接子组件。

实现方式:
通过在子组件上添加属性(props)来传递数据。

示例:

  • 父组件
import React from 'react';
class ParentComponent extends React.Component {render() {const message = "Hello from parent!";return <ChildComponent message={message} />;}
}
  • 子组件
import React from 'react';
class ChildComponent extends React.Component {render() {return <p>{this.props.message}</p>;}
}

在上述示例中,ParentComponent通过message属性向ChildComponent传递了数据,子组件可以通过this.props来访问这个数据并进行渲染。

二、子传父通信方式

子组件向父组件传递数据或触发事件是另一种常见的通信方式。这种方式适用于子组件需要将数据传递给其父组件的情况。

实现方式:
通过在子组件内部定义回调函数,然后将这个回调函数传递给子组件,子组件在合适的时机调用这个函数来传递数据。

示例:

  • 父组件
import React from 'react';
class ParentComponent extends React.Component {handleDataFromChild(data) {console.log("Data from child:", data);};render() {return <ChildComponent onDataReady={data => this.handleDataFromChild(data)} />;}
}
  • 子组件
import React from 'react';
class ChildComponent extends React.Component {sendDataToParent() {const data = "Data from child!";this.props.onDataReady(data);};render() {return <button onClick={() => this.sendDataToParent()}>Send Data</button>;}
}

在上述示例中,ChildComponent通过onDataReady属性传递一个回调函数给父组件。当子组件内部的按钮被点击时,会调用这个回调函数并将数据传递给父组件。

三、应用示例

下面通过一个实际的应用示例,展示父传子和子传父通信方式的应用。

  • 父组件
import React, { Component } from 'react'
class ParentComponent extends Component {constructor() {super()this.state = {tabs: ["首页", "热门", "我的"],curIndex: 0}}tabClick(ind) {this.setState({ curIndex: ind })}render() {const {tabs, curIndex} = this.statereturn (<div className="App"><ChildComponent tabs={tabs} tabClick={(ind) => this.tabClick(ind)} /><h2>{tabs[curIndex]}</h2></div>);}
}
  • 子组件
import React, { Component } from 'react'
class ChildComponent extends Component {constructor() {super() this.state = {currentIndex: 0}}changeTab(ind) {this.setState({ currentIndex: ind })this.props.tabClick(ind)}render() {const { tabs } = this.propsconst { currentIndex } = this.statereturn (<div><ul className='tabUl'>{tabs.map((item, ind) => {return(<li key={item} className={`${currentIndex === ind ? "active" : ''}`}onClick={e => this.changeTab(ind)}><span>{item}</span></li>)})}</ul></div>)}
}

在上述示例中,实现了一个tab切换的效果,父组件将信息传给子组件,子组件通过触发回调传递点击tab的下标实现切换效果。

首页

热门

我的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/62659.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VMware tools的安装以及按钮灰色的解决方法

VMware tools的安装 ** 注意&#xff1a;** 新版本的 VMware 会自动安装的 VMware tools&#xff0c;如何测试 VMware tools 呢&#xff1f;在Windows 系统里复制一段话&#xff0c;能粘贴到 Ubuntu 系统里终端里&#xff0c;说明 VMware tools 已经安装了。 没有安装的请参考…

Quartz 动态添加、修改和删除定时任务

Quartz 是个开源的作业调度框架&#xff0c;为在 Java 应用程序中进行作业调度提供了简单却强大的机制。Quartz框架包含了调度器监听、作业和触发器监听。你可以配置作业和触发器监听为全局监听或者是特定于作业和触发器的监听。Quartz 允许开发人员根据时间间隔&#xff08;或…

问道管理:暂停交易!港交所最新宣布,北向资金也受影响!大涨超180%

今日上午A股商场全体涨跌互现&#xff0c;煤炭板块涨幅居前。新股方面也体现较好&#xff0c;有一只新股盘中一度暴涨超越180%。 别的&#xff0c;飓风“苏拉”对股市也产生了影响。港交所最新公告称&#xff0c;因为八号飓风信号现正收效&#xff0c;今日&#xff08;星期五&…

抢先体验|乐鑫推出 ESP32-S3-BOX-3 新一代开源 AIoT 开发套件

乐鑫科技 (688018.SH) 非常高兴地宣布其开发套件阵容的最新成员 ESP32-S3-BOX-3。这款完全开源的 AIoT 应用开发套件搭载乐鑫高性能 ESP32-S3 AI SoC&#xff0c;旨在突破传统开发板&#xff0c;成为新一代开发工具的引领者。 【乐鑫新品抢先体验】ESP32-S3-BOX-3 新一代开源 A…

代码随想录刷题笔记 (python版本) 持续更新.....

代码随想录刷题笔记总结: https://www.programmercarl.com/ 个人学习笔记 如有错误欢迎指正交流1. 数组 1.1 理论基础 详细介绍:https://www.programmercarl.com/%E6%95%B0%E7%BB%84%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80.html 数组下标都是从0开始的。数组内存空间的地址是…

JavaScript安全性最佳实践:如何保护你的Web应用程序

在如今的数字时代&#xff0c;网页应用程序的安全性至关重要。恶意攻击者不断寻找机会来入侵你的应用程序。为了帮助你保护你的网页应用程序&#xff0c;我们将介绍一些关键的JS安全性知识点&#xff0c;并提供示例代码来演示如何实施它们。 1. 跨站点脚本 XSS攻击是一种常见…

jmeter单接口和多接口测试

最近接触到了多接口串联&#xff0c;接口串联的技术会在其他帖子有说明&#xff0c;其核心技术点就是通过正则表达式和变量来实现接口的关联。目前为止呢笔者用到的地方还只有一个&#xff0c;就是关于session保持的时候。但是看到很多资料都说测试过程中经常遇到b接口需要用a接…

github gitee go开发 热门开源项目

目录 高性能go开发建议组件字符串数据结构类型转换Jsonflagreflect日期时间Math异常开发工具包调试工具翻译对象复制验证验证码weChat支付ExcelWord图像PDF文件IOruntimeOSDevops工具 Web框架gin 微服务框架容器编排消息队列测试日志远程调用网络通信异步并发数据库 存储缓存鉴…

jvm 新生代的区域划分

虚拟机将内存分为一块较大的 Eden 空间和两块较小的 Survivor 空间&#xff0c;每次分配内存只使用 Eden 和其中一块 Survivor。发生垃圾收集时&#xff0c;将 Eden 和 Survivor 中仍然存活的对象一次性复制到另外一块 Survivor 空间上&#xff0c;然后直接清理掉 Eden 和已用过…

【1day】iRDM4000智慧站房管理员密码重置漏洞学习

目录 一、漏洞描述 二、资产测绘 三、漏洞复现 四、漏洞修复 一、漏洞描述 iRDM4000智慧站房是一种用于在线监管、诊断和配置子站的智能设备。它被广泛应用于电力、能源、交通等领域,用于实时监控和管理分布式站房设备。iRDM4000智慧站房在线监管、诊断与配置子站存在管理…

【学习笔记】计算机视觉对比学习综述

计算机视觉对比学习综述 前言百花齐放InstDiscInvaSpreadCPCCMC CV双雄MoCoSimCLRMoCo v2SimCLR v2SwAV 不用负样本BYOLSimSiam TransformerMoCo v3DINO 总结参考链接 前言 本篇对比学习综述内容来自于沐神对比学习串讲视频以及其中所提到的论文和博客&#xff0c;对应的链接详…

Scikit-Learn 和深度学习怎么选择

大家好&#xff0c;今天我们要聊聊一个机器学习的话题&#xff1a;Scikit-Learn 和深度学习&#xff0c;到底哪一个更适合解决你的问题&#xff1f;我们先来看看这两种技术的异同点&#xff0c;然后再讲讲如何在实际问题中做出选择。 1. Scikit-Learn 与深度学习&#xff1a;谁…

java+springboot+mysql校园跑腿管理系统

项目介绍&#xff1a; 使用javaspringbootmysql开发的校园跑腿管理系统&#xff0c;系统包含超级管理员&#xff0c;系统管理员、用户角色&#xff0c;功能如下&#xff1a; 超级管理员&#xff1a;管理员管理&#xff1b;用户管理&#xff08;充值&#xff09;&#xff1b;任…

mybatiplus代码生成器

目录 1.pom文件引入 2.引入模板引擎 3.注意 新版本&#xff0c;老版本配置和用法都不太一样&#xff0c;此处暂不展示&#xff1b;另外也可以尝试一下MyBatis-Flex 总之mybatisplus有的或者收费的&#xff0c;它都有MyBatis-Flex 是什么 - MyBatis-Flex 官方网站 1.pom文件…

C++面试题(叁)---操作系统篇

目录 操作系统篇 1 Linux中查看进程运行状态的指令、查看内存使用情况的指令、 tar解压文件的参数。 2 文件权限怎么修改 3 说说常用的Linux命令 4 说说如何以root权限运行某个程序。 5 说说软链接和硬链接的区别。 6 说说静态库和动态库怎么制作及如何使用&#xff0c;区…

自动化实时在线静电监控系统的构成

自动化实时在线静电监控系统是一种帮助企业监测和管理静电问题的技术解决方案。静电在许多工业和商业环境中都是一个潜在的风险和生产问题。通过使用这样的监控系统&#xff0c;企业可以及时发现并采取对策来预防或减轻可能的静电问题。 该系统通常由以下组成部分构成&#xf…

三、定长内存池

三、定长内存池 我们知道申请内存使用的是malloc&#xff0c;malloc其实就是一个通用的大众货&#xff0c;什么场景下都可以使用&#xff0c;而什么场景下都可以用就意味着什么场景下都不会有很高的性能&#xff0c;下面我们就先来设计一个定长内存池作为一个开胃菜&#xff0…

Golang 中的 crypto/ecdh 包详解

什么是 ECDH 算法&#xff1f; ECDH&#xff08;Elliptic Curve Diffie-Hellman&#xff09;算法是一种基于椭圆曲线的密钥交换协议&#xff0c;用于安全地协商共享密钥&#xff08;Secret Key&#xff09;&#xff0c;步骤如下&#xff1a; 1. 选择椭圆曲线&#xff1a;ECDH…

linux字符串处理

目录 1. C 截取字符串,截取两个子串中间的字符串linux串口AT指令 2. 获取该字符串后面的字符串用 strstr() 函数查找需要提取的特定字符串&#xff0c;然后通过指针运算获取该字符串后面的字符串用 strtok() 函数分割字符串&#xff0c;找到需要提取的特定字符串后&#xff0c;…

HTML/CSS盒子模型

盒子&#xff1a;页面中的所有的元素&#xff08;标签&#xff09;&#xff0c;都可以看做一个盒子&#xff0c;由盒子将页面中的元素包含在一个矩形区域内&#xff0c;通过盒子的视角更加方便的进行页面布局 盒子模型的组成&#xff1a; 内容区域&#xff08;content&#xff…