前端react入门day03-react获取dom与组件通信

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

目录

受控表单绑定 

React中获取DOM

组件通信

父传子 

父传子-基础实现

父传子-props说明

父传子 - 特殊的prop children

子传父 

使用状态提升实现兄弟组件通信

使用Context机制跨层级组件通信


受控表单绑定 

概念:使用React组件的状态(useState)控制表单的状态

1. 准备一个React状态值
2. 通过value属性绑定状态,通过onChange属性绑定状态同步的函数
//受控绑定表单
import { useState } from "react"function App() {const[value ,setValue]=useState('')return (<div><input value={value}onChange={(e)=>setValue(e.target.value)}type="text"/></div>);
}export default App;

React中获取DOM

在 React 组件中获取/操作 DOM,需要使用 useRef React Hook钩子函数 ,分为两步:
1. 使用useRef创建 ref 对象,并与 JSX 绑定
2. 在DOM可用时,通过 inputRef. current 拿到 DOM 对象
2
//React获取DOM
import { useRef } from "react"function App() {const inputRef = useRef(null)const showDom=()=>{console.log(inputRef.current)}return (<div><input type="text" ref={inputRef}/><button onClick={showDom}>获取dom</button></div>);
}export default App;

组件通信

概念:组件通信就是 组件之间的数据传递, 根据组件嵌套关系的不同,有不同的通信方法
4

父传子 

父传子-基础实现

实现步骤
1. 父组件传递数据 - 在子组件标签上 绑定属性
2. 子组件接收数据 - 子组件通过 props参数 接收数据

 

//父传子
function Son(props) {return <div>this is son,{props.name}</div>
}function App() {const name = 'this is app name'return (<div><Son name={name} /></div>);
}export default App;

网页显示为:

父传子-props说明

1. props可传递任意的数据
数字、字符串、布尔值、数组、对象、函数、JSX
2. props是只读对象
子组件 只能读取props中的数据 ,不能直接进行修改, 父组件的数据只能由父组件修改

父传子 - 特殊的prop children

场景:当我们把内容嵌套在子组件标签中时,父组件会自动在名为children的prop属性中接收该内容

子传父 

核心思路:在子组件中调用父组件中的函数并传递参数

function Son({onGetSonMsg}) {const sonMsg="this is son msg"return (<div>this is Son<button onClick={()=>onGetSonMsg(sonMsg)}>sendMsg </button></div>)
}function App() {const getMsg=(msg)=>{console.log(msg)}return (<div>this is APP<Son onGetSonMsg={getMsg} /></div>);
}export default App;

使用状态提升实现兄弟组件通信

实现思路:借助“状态提升”机制,通过父组件进行兄弟组件之间的数据传递
1. A组件先通过子传父的方式把数据传给父组件App
2. App拿到数据后通过父传子的方式再传递给B组件

// 1. 通过子传父 A -> App
// 2. 通过父传子 App -> Bimport { useState } from "react"function A ({ onGetAName }) {// Son组件中的数据const name = 'this is A name'return (<div>this is A compnent,<button onClick={() => onGetAName(name)}>send</button></div>)
}function B ({ name }) {return (<div>this is B compnent,{name}</div>)
}function App () {const [name, setName] = useState('')const getAName = (name) => {console.log(name)setName(name)}return (<div>this is App<A onGetAName={getAName} /><B name={name} /></div>)
}export default App

使用Context机制跨层级组件通信

 

实现步骤:
1. 使用createContext方法创建一个上下文对象Ctx
2. 在顶层组件(App)中通过 Ctx.Provider 组件 提供数据
3. 在底层组件(B)中通过 useContext 钩子函数获取消费数据
// App -> A -> Bimport { createContext, useContext } from "react"// 1. createContext方法创建一个上下文对象const MsgContext = createContext()// 2. 在顶层组件 通过Provider组件提供数据// 3. 在底层组件 通过useContext钩子函数使用数据function A () {return (<div>this is A component<B /></div>)
}function B () {const msg = useContext(MsgContext)return (<div>this is B compnent,{msg}</div>)
}function App () {const msg = 'this is app msg'return (<div><MsgContext.Provider value={msg}>this is App<A /></MsgContext.Provider></div>)
}export default App

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

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

相关文章

J4 - ResNet与DenseNet结合

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 目录 环境模型设计模型效果展示总结与心得体会 环境 系统: Linux语言: Python3.8.10深度学习框架: Pytorch2.0.0cu118显卡&#xff1a;GT…

构建坚固网络,SD-WAN网络配置指南

在新兴的网络技术中&#xff0c;软件定义广域网&#xff08;SD-WAN&#xff09;作为关键角色脱颖而出&#xff0c;被广泛应用于构建高效可靠的企业网络。利用SD-WAN技术&#xff0c;企业能够更好地管理和优化其网络基础设施&#xff0c;实现更高效的连接和数据传输。本文将深入…

STM32标准库开发——串口发送/单字节接收

USART基本结构 串口发送信息 启动串口一的时钟 RCC_APB2PeriphClockCmd(RCC_APB2Periph_USART1,ENABLE);初始化对应串口一的时钟&#xff0c;引脚&#xff0c;将TX引脚设置为复用推挽输出。 RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA,ENABLE); GPIO_InitTypeDef GPIO_In…

BigeMap在Unity3d中的应用,助力数字孪生

1. 首先需要用到3个软件&#xff0c;unity&#xff0c;gis office 和 bigemap离线服务器 Unity下载地址:点击前往下载页面(Unity需要 Unity 2021.3.2f1之后的版本) Gis office下载地址:点击前往下载页面 Bigemap离线服务器 下载地址: 点击前往下载页面 Unity用于数字孪生项…

比吸收率(SAR)

本文旨在介绍比吸收率&#xff08;Specific Absorption Rate&#xff09;的基本知识。搬运自https://www.antenna-theory.com。英语够用的朋友可以直接移步。感谢网站创始人Peter Joseph Bevelacqua教授的无私奉献。 ------------------我是分隔线------------------- 比吸收…

【征服redis6】Redis的内存淘汰详解

目录 1.redis的基本策略 2.Redis中的缓存淘汰策略 3.Redis内存不足的情况 4.几种淘汰策略的实现原理 5.项目实践与优化策略 5.1 配置案例 5.2 项目优化策略参考 数据库存储会将数据保存到磁盘中&#xff0c;而Redis的核心数据是在内存中的&#xff0c;而Redis本身主要用来…

【Java练习题汇总】《第一行代码JAVA》多线程篇,汇总Java练习题——线程及多线程概念、Thread 类及 Runnable 接口、线程状态、synchronized同步操作...

Java练习题 多线程篇 1️⃣ 多线程篇2️⃣ 答案 1️⃣ 多线程篇 一、填空题 Java 多线程可以依靠________ 、________ 和________ 三种方式实现。多个线程操作同一资源的时候需要注意________&#xff0c;依靠________ 关键字实现&#xff0c;实现手段是&#xff1a;_______…

「 网络安全常用术语解读 」杀链Kill Chain详解

1. 简介 早在2009年&#xff0c;Lockheed Martin公司就提出了杀链(Kill Chain)理论&#xff0c;现在也称之为攻击者杀链(Attacker Kill Chain)。杀链其实就是攻击者进行网络攻击时所采取的步骤。杀链模型包括7个步骤&#xff1a;1侦察 -> 2武器化 -> 3交付 -> 4利用 …

C语言——整数和浮点数在内存中的存储

目录 一、整数在内存中的存储 二、大小端字节序和字节序判断 2.1 什么是大小端&#xff1f; 2.2 为什么有大小端? 2.3 练习 2.3.1 练习1 2.3.2 练习2 三、浮点数在内存中的存储 3.1练习 3.2 浮点数的存储 3.2.1浮点数存的过程 3.2.2浮点数取的过程 3.3 题目解…

消息中间件之Kafka(一)

1.简介 高性能的消息中间件&#xff0c;在大数据的业务场景下性能比较好&#xff0c;kafka本身不维护消息位点&#xff0c;而是交由Consumer来维护&#xff0c;消息可以重复消费&#xff0c;并且内部使用了零拷贝技术&#xff0c;性能比较好 Broker持久化消息时采用了MMAP的技…

pl/sql程序块的使用

-- Created on 2024-01-15 by ADMINISTRATOR declare -- Local variables hererecord_tablename varchar2(100);---test_record表名record_StartNo integer(19);---test_record开始编号temp_No integer(19);maxnbbh integer(19);nCnt integer : 20;fi…

利用浏览器开发者工具进行网页性能优化

目录 学习目标&#xff1a; 学习内容&#xff1a; 学习时间&#xff1a; 学习产出&#xff1a; 网页性能优化的基本概念和指标&#xff1a; 浏览器开发者工具的基本功能和使用方法&#xff1a; 使用网络面板进行网页加载性能分析&#xff1a; 使用性能面板进行网页渲染性能分析…