前端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.mzph.cn/news/624551.shtml

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

相关文章

FFmpeg之AVFilter

文章目录 一、概述二、重要结构体2.1、AVFilterGraph2.2、AVFilter2.3、AVFilterContext 三、流程梳理3.1、FFmpeg AVFilter 使用整体流程3.2、过滤器构建流程3.2.1、分配AVFilterGraph3.2.2、创建过滤器源3.2.3、创建接收过滤器3.2.4、生成源和接收过滤器的输入输出3.2.5、通过…

Java开发+Intellij-idea+Maven+工程构建

Java开发Intellij-ideaMaven工程构建 Intellij-idea是一款流行的Java集成开发环境&#xff0c;它支持Maven作为项目管理和构建工具。Maven可以帮助开发者自动下载项目依赖的jar包&#xff0c;执行编译、测试、打包等生命周期任务。本资源将介绍如何在Intellij-idea中创建、导入…

精品基于Uniapp+springboot车辆充电桩缴费管理系统管理系统App-地图

《[含文档PPT源码等]精品基于Uniappspringboot充电桩管理系统App》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; 开发语言&#xff1a;Java 后台框架&#xff1a;springboot、ssm 安…

element + table 每两行对比相同值列合并

在开始之前先要明确几个概念&#xff1a; 保持不变&#xff1a;{ rowspan: 1, colspan: 1 } 删除一个单元格&#xff1a;{ rowspan: 0, colspan: 0 } 合并一个单元格&#xff1a;{ rowspan: 2, colspan: 1 } <template><div><el-table:data"tableData&quo…

Appium 自动化测试

1.Appium介绍 1&#xff0c;appium是开源的移动端自动化测试框架&#xff1b; 2&#xff0c;appium可以测试原生的、混合的、以及移动端的web项目&#xff1b; 3&#xff0c;appium可以测试ios&#xff0c;android应用&#xff08;当然了&#xff0c;还有firefoxos&#xff09;…

web自动化实现登录的几种方式

目录 前言 一、pythonunittest框架实现登录功能 二、pythonselenium实现登录功能 三、pythonrequests库实现登录功能 前言 今天主要想介绍python语言不同的自动化测试框架的结合方式来模拟登录功能。想了解自动化测试框架的同学不要错过哦&#xff01; 一、pythonunittest框…

Windows 下 QT开发环境的搭建:

下载QT:Index of /archive/qt/5.14 下载Cmake :CMake - Upgrade Your Software Build System (1)QT在windows,C, 打包exe&#xff1a; step1:window上安装QT软件&#xff1a; Windows下的QT系统开发环境搭建_qt windows-CSDN博客. step2:新建一个界面工程&#xff1a; (1)打…

【css】渐变效果

css渐变效果 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果。 用它代替图片&#xff0c;可以加快页面的载入时间、减小带宽占用。同时&#xff0c;因为渐变是由浏览器直接生成的&#xff0c;它在页面缩放时的效果比图片更好&#xff0c;因此你可以更加灵活、便捷的调整页…

postgresql16 物理复制与逻辑复制的实现和对比

本文面向想要练习 PostgreSQL 中数据库复制基础知识但可能无法访问远程服务器的初学者。我认为学习新技术时&#xff0c;在自己的机器上运行示例以巩固概念是至关重要的。对于副本来说&#xff0c;这可能很困难&#xff0c;因为许多可用的资源假设用户具有一定的 PostgreSQL 经…

网页屏幕适配通透了

一&#xff0c;如果设计尺寸固定 那就按照固定尺寸开发 一般都是1920*1080 二&#xff0c;需要适配多种像素屏幕&#xff08;大屏可视化&#xff09; 可使用媒体查询设置多套css样式或者使用自适应单位&#xff0c;%&#xff0c;vw&#xff0c;vh 最好解决方案rem&#xff…

IPv6路由综合运用

一、基础配置: SWA: sw1(config)#host swA swA(config)#ipv6 ena swA(config)# vlan 100 swA(config-vlan100)#int vlan 100 swA(config-if-vlan100)#ipv6 ena swA(config-vlan100)#ip add 172.16.1.1 255.255.255.252 swA(config-if-vlan100)#int e1/0/24 swA(conf…

教育科学杂志教育科学杂志社教育科学编辑部2023年第12期部分目录

“思政教育联合思维导图”教学模式在肝病感染控制护理临床教学中的应用 黄雪霞;陈海涵;蒋雅文 中职语文教学中厚植爱国主义情怀的要点分析 苏琴 职业素养视角下中职计算机专业课程教学改革实践 李石 产教融合背景下高职院校产业学院建设模式的实践探索 郭洋 《工程制图与CAD》课…

数据结构学习 jz31 栈的压入、弹出序列

关键词&#xff1a;模拟 栈 不太熟&#xff0c;调了好一阵子。 题目&#xff1a;https://leetcode.cn/problems/zhan-de-ya-ru-dan-chu-xu-lie-lcof/ 思路&#xff1a; 主要是利用一个辅助栈&#xff0c;来模拟这个过程&#xff0c;如果过程不行就返回失败。 int sig 0;如…

Java研学-分页查询

一 分页概述 1 介绍 将大量数据分段显示&#xff0c;避免一次性加载造成的内存溢出风险 2 真假分页 ① 真分页   一次性查询出所有数据存到内存&#xff0c;翻页从内存中获取数据&#xff0c;性能高但易造成内存溢出 ② 假分页   每次翻页从数据库中查询数据&#xff0c…

解决计算机中vcruntime140.dll错误!六种方法教你修复

什么是vcruntime140.dll文件呢&#xff1f;为什么会出现丢失的情况&#xff1f;如何解决这个问题呢&#xff1f;本文将为您详细介绍vcruntime140.dll文件的作用、丢失原因以及6个快速解决方法。 一、vcruntime140.dll是什么文件&#xff1f; vcruntime140.dll是Visual C Redi…

聚合收益协议 InsFi :打开铭文赛道全新叙事的旋转门

​“InsFi 协议构建了一套以铭文资产为基础的聚合收益体系&#xff0c;该体系正在为铭文资产捕获流动性、释放价值提供基础&#xff0c;该生态也正在成为铭文赛道掘金的新热土。” 在 2023 年年初&#xff0c;Ordinals 协议在比特币链上被推出后&#xff0c;为比特币链上带来了…

STC51+TLC2543+ADXL335+proteus

51单片机解析adxl335振动检测蜂鸣器报警课设 通过按键调整振动检测阈值 传感器介绍 TLC2543&#xff1a;12 位精密模数转换器&#xff0c;原理图与引脚功能描述如下所示&#xff1a; 引脚功能1~9、11、12模拟量输入通道10GND电源地13REF-为负基准电压端14REF为正基准电压端…

基于ssm的课程在线教学平台设计与实现论文

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统Java课程教学信息管理难度大&#xff0c;容错率低&#x…

数据资产入表背后:中国To B数字化驶入“数据时代”

数据资产“入表”&#xff0c;更像是一剂通过颠覆旧的生产关系&#xff0c;从根上医治数字化转型的“良方”。 那么&#xff0c;数据资产到底是什么&#xff1f;以及在愈发被规范的数据市场大背景下&#xff0c;对中国的To B企业和To B服务商而言&#xff0c;正在或者即将发生…