react中子传父信息

news2024/10/5 2:25:34

思路是:

在父组件定义一个函数接受参数,接收的参数用于接收子组件的信息,把函数传给子组件,子组件调用父亲传来的函数并把要告诉父亲的话传到函数中,就实现了子传父消息

import { useState } from 'react'

import { useRef } from 'react'
// import './App.css'




function Son({onGetSonMsg}) {
const mesgForFa = "子传父亲的消息"
  return(
    <div>这是儿子组件
       <button onClick={()=>onGetSonMsg(mesgForFa)}>告诉父亲</button>
    </div>
  )
}



function App() {
  const [count, setCount] = useState(0)
const inputRef = useRef(null)
const sonMsg = (msg)=>{
    console.log(msg);
    
}


  return (
    <>
      
      <Son onGetSonMsg={sonMsg}>
      </Son>
    </>
  )
}

export default App

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

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

相关文章

JavaWeb笔记整理+图解——服务器渲染技术之EL表达式与JSTL

上一篇我们讲解了什么是服务器渲染技术和jsp&#xff0c;今天我来整理一下EL表达式和JSTL的笔记与图解&#xff0c;让我们的jsp页面更加的简洁与可维护。 没看过上一期的小伙伴可以看上一期的笔记&#xff1a; JavaWeb笔记全整理——JSP服务器渲染技术-CSDN博客 一、EL表达式…

揭开 SOCKS5 有哪些强大的功能?

在在线隐私和安全领域&#xff0c;SOCKS5 是一种多功能且功能强大的协议&#xff0c;为用户提供了一种无缝的方式来加密他们的互联网流量、绕过防火墙并以增强的匿名性和灵活性访问网络。无论您是担心在线监控、地理封锁还是数据隐私&#xff0c;了解如何利用 SOCKS5 的功能都可…

Apache-Doris单机部署

参考&#xff1a; 快速体验 Apache Doris - Apache Doris 1、Apache Doris是一款 基于MPP架构的高性能、实时的分析型数据库&#xff0c;以高效、简单、统一的特点被人们所熟知&#xff0c;仅需 亚秒级响应时间即可返回海量数据下的查询结果&#xff0c;不仅可以支持高并发的点…

ue引擎游戏开发笔记(46)——简单UI设计

1.需求分析&#xff1a; 玩家操作界面应该有基本的准星和血量显示等内容&#xff0c;告知玩家角色的基本状态。 2.操作实现&#xff1a; 1.较为简单的内容&#xff0c;在控件面板建立相应内容&#xff0c;之后链接到游戏中即可&#xff01; 2.先做准星&#xff0c;在画布上搞个…

Day 56 647. 回文子串 516.最长回文子序列

回文子串 给定一个字符串&#xff0c;你的任务是计算这个字符串中有多少个回文子串。 具有不同开始位置或结束位置的子串&#xff0c;即使是由相同的字符组成&#xff0c;也会被视作不同的子串。 示例 1&#xff1a; 输入&#xff1a;“abc”输出&#xff1a;3解释&#xf…

蓝桥杯Web开发【大学组:国赛】2022年真题

1.分一分 如果给你一个数组&#xff0c;你能很快将它分割成指定长度的若干份吗&#xff1f; 1.1 题目问题 请在 js/index.js 文件中补全函数 splitArray 中的代码&#xff0c;最终返回按指定长度分割的数组。 具体要求如下&#xff1a; 将待分割的&#xff08;一维&#x…

“星战之父”乔治・卢卡斯吐槽好莱坞“几乎没有原创思维”,AI 将“不可避免”用于电影制作

《星球大战》系列的创作者乔治・卢卡斯&#xff08;George Lucas&#xff09;在 1977 年奠定了电影制作传奇人物的地位&#xff0c;他对当今电影的状况及其发展方向有一些自己的看法。 他在 2024 年戛纳电影节上谈到了当前的电影行业。现年 80 岁的卢卡斯在接受法国媒体 Brut …

STM32建立工程问题汇总

老版本MDK&#xff0c;例如MDK4 工程内容如下&#xff1a; User文件夹中存放main.c文件&#xff0c;用户中断服务函数&#xff08;stm32f1xx.it.c&#xff09;&#xff0c;用户配置文件&#xff08;stm32f1xx_hal_conf.h&#xff09;等用户程序文件&#xff0c;或者mdk启动程序…

GIT提交:.husky/pre-commit: line 2: .husky/_/husky.sh: No such file or directory

GIT提交&#xff1a;.husky/pre-commit: line 2: .husky/_/husky.sh: No such file or directory 一些项目添加了代码提交校验和格式化&#xff0c;在windows下会忽略.husky下文件提交导致git数据丢失。 处理方案&#xff1a; 方案01&#xff1a;补齐缺失的文件 1.1 项目根…

最新斗音评论区截流拓客,自动引流【引流软件+使用教程】

面对社交媒体的蓬勃生长&#xff0c;加粉和拓展客户群成为品牌及个体的当务之急。新推出的一款技术工具恰到好处地迎合了这一需求&#xff0c;提供了一个多功能、适用性强的增粉与互动解决方案。该工具与抖音平台的所有版本兼容&#xff0c;消除了对特定版本的依赖。 利用这一…

微服务架构-聚合设计模式

微服务架构-聚合设计模式 聚合器&#xff08;Aggregator&#xff09;设计模式&#xff1a;用于将来自多个微服务的数据&#xff0c;聚合成一个统一的响应&#xff0c;提供给客户端。 聚合模式的核心思想&#xff1a;是使用一个聚合器服务&#xff08;Aggregator Service&#…

greendao实现增删改查

说明&#xff1a;最近碰到一个需求&#xff0c;在安卓上使用greendao框架&#xff0c;实现增删改查数据 效果图&#xff1a; step1: // Top-level build file where you can add configuration options common to all sub-projects/modules. buildscript {repositories {go…

26计算机操作系统408考研--操作系统处理机调度篇章(五)

文章目录 一、调度简介死锁一、调度简介 计算机系统中,处理器和内存资源会出现供不应求的情况,特别是多个I/O设备与主机交互,作业不断进入系统,或者是多个批处理作业在磁盘的后备队列中等待进入内存的情况。操作系统在管理有限的资源的同时,需要考虑如何选取进入内存的作…

破解App渠道归因难题,Xinstall助你实现精准数据追踪!

在移动互联网时代&#xff0c;App的推广和运营面临着诸多挑战。其中&#xff0c;渠道归因问题一直困扰着众多推广者。如何准确追踪用户来源&#xff0c;分析不同渠道的推广效果&#xff0c;成为了摆在推广者面前的一大难题。然而&#xff0c;有了Xinstall的出现&#xff0c;这一…

LabVIEW软件需求分析文档内容和编写指南

编写LabVIEW软件需求分析文档&#xff08;Software Requirements Specification, SRS&#xff09;是软件开发的关键步骤之一。以下是详细的内容结构、编写指南和注意事项&#xff1a; 内容结构 引言 项目背景&#xff1a;简要介绍项目背景和目的。 文档目的&#xff1a;说明需…

AI Agent教育行业落地案例

【AI赋能教育】揭秘Duolingo背后的AI Agent&#xff0c;让学习更高效、更有趣&#xff01; ©作者|Blaze 来源|神州问学 引言 随着科技的迅猛发展&#xff0c;人工智能技术已经逐步渗透到我们生活的各个方面。而随着AI技术的广泛应用&#xff0c;教育培训正引领着一场新的…

双指针法和链表练习题(2024/5/28)

1面试题 02.07. 链表相交 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xf…

【云原生】Kubernetes----POD调度策略

目录 引言 一、Pod调度策略 &#xff08;一&#xff09;基本概述 &#xff08;二&#xff09;调度原则 &#xff08;三&#xff09;Predicate常见算法 &#xff08;四&#xff09;优先级排序 &#xff08;五&#xff09;调度过程 1.过滤阶段 2.优先级排序 3.选择最优…

Python 点云处理-点云半径滤波

点云半径滤波 一、介绍二、代码示例三、结果示例其他参考:C++ 中点云半径滤波 一、介绍 点云半径滤波:删除点云一定范围内没有达到足够多领域的所有点云。通俗的讲:就是要求点云P在半径为R内需要有M个领域点,若在点P的R范围内领域点个数大于M个,则保留该点云,领域点个数…

OrangePi AIpro初识及使用大模型GPT-Neo-1.3B测试

OrangePi AIpro介绍 1.1. 开发板简介 Orange Pi AI Pro 开发板是香橙派联合华为精心打造的高性能AI 开发板&#xff0c;其搭 载了昇腾AI 处理器&#xff0c;可提供8TOPS INT8 的计算能力&#xff0c;内存提供了8GB 和16GB 两种版本。可以实现图像、视频等多种数据分析与推理…