react 组件通信 —— 父子传值 【 函数式/类式 】

1、函数式组件通信

父子间通信 —— 父传子

 父组件

export default function father() {return (<div style={{width:'400px',height:'200px',background:'pink',marginLeft:'500px'}}>我是父组件<hr /><Son name={"韩小刀"}/></div>)
}

子组件

export default function son(props) {return (<div style={{width:'200px',height:'100px',background:'lightgreen'}}>我是子组件<hr />我接受到的父组件的值是:{props.name}</div>)
}

如下图所示:

 父子间通信 —— 子传父

父组件

export default function father() {// 父组件的数据const [data,setData] = useState('')// 父组件传给子组件的方法const onMessageChange = (message) => {setData(message)}return (<div style={{width:'400px',height:'200px',background:'pink',marginLeft:'500px'}}>我是父组件<div>接收子组件的数据:{data}</div><hr /><B sendMessageData={onMessageChange}/></div>)
}

 子组件

export default function son({sendMessageData}) {//子组件操作 给父组件传数据const handleData=()=>{sendMessageData('韩小刀')}return (<div style={{ width: "200px", height: "100px", background: "lightgreen" }}>我是子组件<hr /><button onClick={handleData} >点我给父组件传数据</button></div>);
}

 如下图所示:

 2、类式组件通信

父子间通信 —— 父传子

 父组件

export default class Father extends Component {//父组件的状态数据state = {name:'韩小刀'}render() {return (<div style={{width:'400px',height:'200px',background:'pink',marginLeft:'500px'}}>我是父组件<hr /><Son changeDataMessage={this.state.name}/></div>)}
}

  子组件

export default class Son extends Component {render() {//接收到父组件的数据const {changeDataMessage} = this.propsreturn (<div style={{ width: "200px", height: "100px", background: "lightgreen" }}>我是子组件<hr />接收到的数据:{changeDataMessage}</div>);}
}

 如下图所示:

 父子间通信 —— 子传父

  父组件


export default class Father extends Component {//state写法一// constructor(props) {//   super(props);//   // 初始化状态//   this.state = {//     childMessage: "",//   };// }//state写法二state = {name: "",};changeDataMessage = (message) => {this.setState({ name: message });};render() {return (<div style={{width: "400px",height: "200px",background: "pink",marginLeft: "500px",}}>我是父组件 接收到子数据:{this.state.name}<hr /><B changeDataMessage={this.changeDataMessage} /></div>);}
}

  子组件

export default class Son extends Component {handleMessageData = () => { this.props.changeDataMessage('韩小刀')  }render() {return (<div style={{ width: "200px", height: "100px", background: "lightgreen" }}>我是子组件<hr /><button onClick={this.handleMessageData}>点我给父组件传数据</button> </div>);}
}

 如下图所示:

 

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

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

相关文章

刷代码随想录有感(131):动态规划——回文子串

题干&#xff1a; 代码&#xff1a; class Solution { public:int countSubstrings(string s) {vector<vector<bool>>dp(s.size(), vector<bool>(s.size(), false));int res 0;for(int i s.size() - 1; i > 0; i--){for(int j i; j < s.size(); j)…

[leetcode] shortest-subarray-with-sum-at-least-k 和至少为 K 的最短子数组

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int shortestSubarray(vector<int>& nums, int k) {int n nums.size();vector<long> preSumArr(n 1);for (int i 0; i < n; i) {preSumArr[i 1] preSumArr[i] nums[i];}int res n…

获取商铺信息,以及商铺信息的增删改查

本文章主要讲述如何对商铺信息进行基本的增删改查操作&#xff0c;及数据库对比。 1、获取首页仪表盘统计数据接口 待收费金额&#xff1a; SELECT count(1) as count,IFNULL(sum(total),0)as sum FROM payment_bill WHERE enabled_mark 1 AND pay_state0 欠费数据&#xf…

2970. 统计移除递增子数组的数目 I

解题思路 本题中的子数组&#xff0c;称为递增子数组。 子数组指的是一个数组中一段连续的数组序列。 假设nums的长度为n&#xff0c;则nums的子数组的个数为 n ( n 1 ) 2 \frac{n\times(n1)}{2} 2n(n1)​。 因此只需要找出不满足的递增子数组即可。 python class Solutio…

C++基础编程100题-021 OpenJudge-1.4-01 判断数正负

更多资源请关注纽扣编程微信公众号 http://noi.openjudge.cn/ch0104/01/ 描述 给定一个整数N&#xff0c;判断其正负。 输入 一个整数N(-109 < N < 109) 输出 如果N > 0, 输出positive; 如果N 0, 输出zero; 如果N < 0, 输出negative 样例输入 1样例输出…

MySQL 程序简介

以下是常用的 MySQL 程序 程序名作用 mysqldMySQL 的守护进程&#xff0c;即 MySQL 服务器&#xff0c;若要使用 mysql 服务&#xff0c;那么 mysqld 必须处在运行状态 mysqlMySQL 客户端程序&#xff0c;用户交互式输入 SQL 语句或以批处理模式从文件执行 SQL 的命令行…

【Neo4j】实战 (数据库技术丛书)学习笔记

Neo4j实战 (数据库技术丛书) 第1章演示了应用Neo4j作为图形数据库对改进性能和扩展性的可能性, 也讨论了对图形建模的数据如何正好适应于Neo4j数据模型,现在到了该动 手实践的时间了。第一章 概述 Neo4j将数据作为顶点和边存储(或者用Neo4j术语,节点和关系存 储)。用户被定…

原生android的内存性能提升方面的测试和优化方案大致设计

一 测试目标&#xff1a; 以满足用户设备的内存性能和不杀后台为目标。 1&#xff1a;满足用户设备的内存性能是指不出现因为内存原因导致的安卓设备死机&#xff0c;卡顿等问题。 2&#xff1a;满足不杀后台是指整个设备使用时&#xff0c;不出现后台app被杀。 通常是估算如果…

Pytorch版本、安装和检验

基于conda包的环境创建、激活、管理与删除 CUDA版本 CUDA 是 NVIDIA 专为图形处理单元 (GPU) 上的通用计算开发的并行计算平台和编程模型&#xff0c;CUDA版本需满足对应的Pytorch要求 进入NVIDIA控制面板 进入左下角“系统信息”&#xff0c;找到组件 “NVIDIA CUDA 12.3.10…

7. 有奖猜谜

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 小明很喜欢猜谜语。 最近&#xff0c;他被邀请参加了 X 星球的猜谜活动。 每位选手开始的时候都被发给 777777 个电子币。 规则是&#xff1a;猜对了&#xff0c;手…

PostgreSQL关闭数据库服务的三种模式

PostgreSQL 提供了三种关闭数据库服务的不同方式&#xff0c;它们最终都是发送一个关闭信号到 postgres 主服务进程。 智能关闭模式 智能关闭&#xff08;Smart Shutdown&#xff09;模式向 postgres 主服务进程发送一个 SIGTERM 信号。此时服务器不允许新的客户端连接&#…

DNS 杂谈

一、定义 DNS&#xff08;Domain Name System&#xff09;&#xff0c;域名系统&#xff0c;该系统记录域名和Ip地址的相互映射关系。用户访问互联网时&#xff0c;通过域名地址得到对应的IP地址&#xff0c;这个过程称为域名解析。DNS运行于UDP协议之上&#xff0c;使用的端口…

手撸俄罗斯方块(一)——简单介绍

手撸俄罗斯方块 简单介绍 《俄罗斯方块》&#xff08;俄语&#xff1a;Тетрис&#xff0c;英语&#xff1a;Tetris&#xff09;&#xff0c;是1980年末期至1990年代初期风靡全世界的电脑游戏&#xff0c;是落下型益智游戏的始祖&#xff0c;电子游戏领域的代表作之一&a…

【代码随想录】【算法训练营】【第64天】 [卡码117]软件构建 [卡码47]参加科学大会

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 卡码网。 day 64&#xff0c;周三&#xff0c;继续ding~ 题目详情 [卡码117] 软件构建 题目描述 卡码117 软件构建 解题思路 前提&#xff1a; 思路&#xff1a; 重点&#xff1a; 代码实现 C语言 [卡码…

算法的复杂度

文章目录 一、算法的效率1、复杂度的概念2、复杂度的重要性 二、时间复杂度三、空间复杂度四、大O的渐进表示发五、计算复杂度案例1、计算Func1函数的复杂度2、计算Fun2的时间复杂度3、计算Func3的时间复杂度4、计算Func4的时间复杂度5、计算strchr的时间复杂度6、计算Func5的时…

大模型/NLP/算法面试题总结5——Transformer和Rnn的区别

Transformer 和 RNN&#xff08;循环神经网络&#xff09;是两种常见的深度学习模型&#xff0c;广泛用于自然语言处理&#xff08;NLP&#xff09;任务。 它们在结构、训练方式以及处理数据的能力等方面有显著的区别。以下是它们的主要区别&#xff1a; 架构 RNN&#xff0…

MySQL空间索引

空间类型是建立在空间类型字段上的。 空间类型 MySQL的空间类型很多&#xff0c;我就不逐一介绍了。重要分四大类&#xff1a; GeometryCurveSurfaceGeometryCollection 前三种&#xff0c;地理、曲线、曲面都是不可实例化的。Geometry有一个子类Point, Curve有一个直接子类L…

docker无法拉取镜像,推荐可以使用下面镜像源

sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF { "registry-mirrors": ["请替换为您自己的代理服务ip或者域名"] } EOF sudo systemctl daemon-reload sudo systemctl restart docker 查看是否换源成功 docker info …

电脑误删除的文件怎么恢复免费 电脑误删文件导致无法开机怎么办

在使用电脑的时候&#xff0c;有时候可能会因为一些错误的操作&#xff0c;导致删除一些文件&#xff0c;如果是普通的文件&#xff0c;最坏的情况也就是文件找回来&#xff0c;如果删除的是系统文件&#xff0c;那么很有可能导致电脑开不了机。下面就给大家详细讲解&#xff0…

Spring Boot项目Jar包加密详解

目录 引言Jar包加密的基础知识 为什么需要加密Jar包Jar包加密的基本原理 常用的Jar包加密工具 ProGuardJavaguardJava Agent Spring Boot项目Jar包加密实战 使用ProGuard对Spring Boot项目进行加密集成Javaguard到Spring Boot项目中通过Java Agent实现动态加密 Jar包加密的安全…