当前位置: 首页 > news >正文

React 子组件调用父组件的方法,以及互相传递数据

<script type="text/babel" data-type="module">
import React, { StrictMode, useState } from 'react';
import { createRoot } from 'react-dom/client';const ParentComponent = () => {const [message, setMessage] = useState("")//父组件方法,将传递给子组件const handleChildAction = (childMessage) => {setMessage(childMessage)  //效果是接收子组件传来的数据,并修改state}const parentMessage = "Hello I'm a parent component" //传递给子组件的数据return (<div style={{padding: '20px', border: '1px solid Red', width: '400px'}}><p>父组件</p><ChildComponent onAction={handleChildAction} fromParent={parentMessage} /><p>来自子组件的消息:{message}</p></div>)
}const ChildComponent = ({onAction, fromParent}) => {//子组件的方法,效果是调用传递过来的父组件方法,并且修改stateconst handleClick = () => {onAction('我是子组件的消息,我收到了你的消息:' + fromParent)}return (<div style={{padding: '20px', border: '1px solid black', width: '300px'}}><p>子组件</p><button onClick={handleClick}>发送消息给父组件</button></div>)
}const root = createRoot(document.getElementById('root'));
root.render(<StrictMode><ParentComponent /></StrictMode>
);
</script>

需要注意的是,如果是TypeScript,需要指定参数的类型是方法

interface ChildComponentProps {onAction: (message: string) => void; 
}const ChildComponent: React.FC<ChildComponentProps> = ({ onAction }) => {

效果:

点击子组件的按钮后:

相关文章:

React 子组件调用父组件的方法,以及互相传递数据

<script type"text/babel" data-type"module"> import React, { StrictMode, useState } from react; import { createRoot } from react-dom/client;const ParentComponent () > {const [message, setMessage] useState("")//父组件…...

爬虫基础---python爬虫系列2

爬虫基础 文章目录 爬虫基础爬虫简介爬虫的用途爬虫的合法性规避风险看懂协议反爬机制反反爬策略 认识HTTPHTTP协议--HyperText Transfer ProtocolHTML--HyperText Markup LanguageHTTPS如何查看网站是什么协议呢使用端口号 URL组成部分详解常用的请求- Request Method常见的请…...

jmeter在beanshell中使用props.put()方法的注意事项

在jmeter中&#xff0c;通常使用beanshell去处理一些属性的设置和获取的操作&#xff0c;而这些操作也是有一定的规则的。 1. 设置属性时&#xff0c;在属性名上要加双引号&#xff0c;这代表它不是一个需要用var去声明的变量 这种设置属性的方式才是有效可行的&#xff0c;在…...

息肉检测数据集 yolov5 yolov8适用于目标检测训练已经调整为yolo格式可直接训练yolo网络

息肉检测数据集 yolov5 yolov8格式 息肉检测数据集介绍 数据集概述 名称&#xff1a;息肉检测数据集&#xff08;基于某公开的分割数据集调整&#xff09;用途&#xff1a;适用于目标检测任务&#xff0c;特别是内窥镜图像中的息肉检测格式&#xff1a;YOLO格式&#xff08;边…...

通过API进行Milvus实例配置

更新Milvus各个组件的配置参数。 调试 您可以在OpenAPI Explorer中直接运行该接口&#xff0c;免去您计算签名的困扰。运行成功后&#xff0c;OpenAPI Explorer可以自动生成SDK代码示例。 ​编辑调试 授权信息 下表是API对应的授权信息&#xff0c;可以在RAM权限策略语句的…...

Excelize 开源基础库 2.9.0 版本正式发布

Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库&#xff0c;基于 ECMA-376&#xff0c;ISO/IEC 29500 国际标准。可以使用它来读取、写入由 Excel、WPS、OpenOffice 等办公软件创建的电子表格文档。支持 XLAM / XLSM / XLSX / XLTM / XLTX 等多种文档格式&#xf…...

人脸识别-特征算法

文章目录 一、LBPH算法1.基本原理2.实现步骤3.代码实现 二、Eigenfaces算法1.特点2.代码实习 三、FisherFaces算法1.算法原理2.算法特点3.代码实现 四、总结 人脸识别特征识别器是数字信息发展中的一种生物特征识别技术&#xff0c;其核心在于通过特定的算法和技术手段&#xf…...

C++【内存管理】(超详细讲解C++内存管理以及new与delete的使用和原理)

文章目录 1.C/C内存分布2.C语言中动态内存管理方式3.C内存管理方式3.1 new/delete操作内置类型3. 2new/delete操作自定义类型 4. operator new与operator delete函数&#xff08;重点&#xff09;5. new和delete的实现原理5.1 内置类型5.2 自定义类型5.2.1 自定义类型调用new[]…...

elementUi el-table 表头高度异常问题

1、现象 在同一个页面通过状态切换不同table时&#xff0c;当从有合并标头行的table切换到无合并表头的table时&#xff0c;无合并表头的table的表头的高度异常了&#xff0c;如下图 切换后 2、解决 给每个el-table 加上一个唯一的key <el-table key"1"></…...

kubekey的应用

随着 Kubernetes 社区的不断发展&#xff0c;即将迎来 Kubernetes 1.30 版本的迭代。在早先的 1.24 版本中&#xff0c;社区作出一个重要决策&#xff1a;不再默认集成 Docker 作为容器运行时&#xff0c;即取消了对 Docker 的默认支持。这就像咱们家厨房换了个新灶头&#xff…...

如何识别并分类转录因子的家族

愿武艺晴小朋友一定得每天都开心 当我们有了差异表达的转录因子列表以后,接下来可能就想知道这些转录因子的家族分布情况是怎样的?有没有1-2个Family在其中起主要作用,占比较多。 基于这种需求,可以按以下几步来实现: 1)从AnimalTFDB4转录因子数据库中,根据需要…...

【C++11】可变模板参数详解

个人主页&#xff1a;chian-ocean 文章专栏 C 可变模板参数详解 1. 引言 C模板是现代C编程中一个非常强大且灵活的工具。在C11标准中&#xff0c;引入了可变模板参数&#xff08;variadic templates&#xff09;&#xff0c;它为模板编程带来了革命性改变。它的出现允许我们…...

本地群晖NAS安装phpMyAdmin管理MySQ数据库实战指南

文章目录 前言1. 安装MySQL2. 安装phpMyAdmin3. 修改User表4. 本地测试连接MySQL5. 安装cpolar内网穿透6. 配置MySQL公网访问地址7. 配置MySQL固定公网地址8. 配置phpMyAdmin公网地址9. 配置phpmyadmin固定公网地址 前言 本文主要介绍如何在群晖NAS安装MySQL与数据库管理软件p…...

QTableWidget 接口详情

Qt Widgets->C Classes->QTableWidget Qt 5.12版本QTableWidget接口详情&#xff08;机翻&#xff09; QTableWidget类提供了一个带有默认模型的基于项的表视图。 属性 列数columnCount : int 行数rowCount : int 细节描述 QTableWidget类提供了一个带有默认模型的基…...

GESP CCF python四级编程等级考试认证真题 2024年9月

一、单选题&#xff08;每题 2 分&#xff0c;共 30 分&#xff09; 第 1 题 据有关资料&#xff0c;山东大学于1972年研制成功DJL-1计算机&#xff0c;并于1973年投入运行&#xff0c;其综合性能居当时全国第三位。DJL-1计算机运算控制部分所使用的磁心存储元件由磁心颗粒组成…...

oracle数据库名实例名服务名

Oracle数据库是一个复杂的系统&#xff0c;它包含多个组件&#xff0c;包括数据库服务器、实例和服务。 数据库名&#xff08;DB_NAME&#xff09;&#xff1a;这是数据库的内部名称&#xff0c;通常在创建数据库时指定&#xff0c;并在整个数据库生命周期内保持不变。 实例名…...

python+appium+雷电模拟器安卓自动化及踩坑

一、环境安装 环境&#xff1a;window11 1.1 安装Android SDK AndroidDevTools - Android开发工具 Android SDK下载 Android Studio下载 Gradle下载 SDK Tools下载 这里面任选一个就可以&#xff0c;最终下载完主要要安装操作安卓的工具adb&#xff0c;安装这个步骤的前提是要…...

Python第七八次作业

1.输入一个大于0的正整数n&#xff0c;如果n 1 ,则返回1&#xff0c; 如果n是偶数&#xff0c;则返回 n // 2 &#xff0c;如果n是奇数&#xff0c;则返回 3n 1&#xff0c;将所有的返回值存放到一个列表中&#xff0c;注意&#xff1a;n是第一个元素&#xff0c;其他的元素根…...

Leetcode——数组:螺旋矩阵59.螺旋矩阵

题目 思路 对于每层&#xff0c;从左上方开始以顺时针的顺序填入所有元素。假设当前层的左上角位于 (top,left)&#xff0c;右下角位于 (bottom,right)&#xff0c;按照如下顺序填入当前层的元素。 从左到右填入上侧元素&#xff0c;依次为 (top,left) 到 (top,right)。 从上到…...

C++类与对象-继承和多态(超全整理)

前言 前面讲类与对象上中下时&#xff0c;所讲的都是在单个类中相关的语法&#xff08;初始化列表、this指针、静态成员、常函数和常对象......&#xff09;或者使两个不同的类产生联系的语法&#xff08;友元&#xff09;。而本文虽然也是类与对象的内容&#xff0c;但和之前的…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...