重温react-04

兄弟组件之间通信

兄弟1

import React, { Component } from 'react'
import pubsub from './pubsub'
export default class learnReact01 extends Component {render() {return (<div>我是兄弟1<button onClick={this.clickMessage}>向兄弟2发信息</button></div>)}clickMessage=()=>{pubsub.publish('message','6666')}
}

兄弟2

import React, { Component } from 'react'
import pubsub from './pubsub'
export default class learnReact01 extends Component {state = {msg: ""}render() {return (<div>我是兄弟2<div>{this.state.msg}</div></div>)}componentDidMount() {pubsub.subscribe('message', (data) => {console.log(data)this.setState({msg: data})})}
}

react中操纵dom和ref

import React, { Component,createRef } from 'react'
import LearnReact from './learnReact04'
export default class learnReact03 extends Component {constructor(props) {super(props)this.state = {name: '张三'}this.divRef = createRef(null)this.learnReactRef = createRef(null)this.buttonRef = createRef(null)}render() {return (<div><div ref={this.divRef}>我是父组件</div><LearnReact ref={this.learnReactRef} /><button ref={this.buttonRef} onClick={this.onclickThisMessage}>点击</button></div>)}componentDidMount() {console.log(this.divRef.current);console.log(this.learnReactRef.current);console.log(this.buttonRef.current);}onclickThisMessage=()=>{this.learnReactRef.current.onclick()}
}

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

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

相关文章

Stable-Baseline3 x SwanLab:可视化强化学习训练

Stable Baselines3 (SB3) 是一个强化学习的开源库&#xff0c;基于 PyTorch 框架构建。它是 Stable Baselines 项目的继任者&#xff0c;旨在提供一组可靠且经过良好测试的RL算法实现&#xff0c;便于研究和应用。StableBaseline3主要被应用于机器人控制、游戏AI、自动驾驶、金…

Django DetailView视图

Django的DetailView是一个用于显示单个对象详情的视图。下面是一个使用DetailView来显示单个书籍详情的例子。 1&#xff0c;添加视图 Test/app3/views.py from django.shortcuts import render# Create your views here. from django.views.generic import ListView from .m…

BGP学习

BGP是一种矢量协议&#xff0c;使用TCP作为传输协议 ,目的端口号是179.是触发式更新&#xff0c;不是周期性更新 BGP的重点是策略路由的选路&#xff0c;能对路由进行路由汇总。运行BGP的路由器被称为BGP发言者&#xff0c;两个建立BGP会话的路由器互为对等体 IBGP和EBGP的区…

代理模式(设计模式)

文章目录 静态代理动态代理代理模式的应用场景动态代理和静态代理的区别 代理模式就是给一个对象提供一个代理&#xff0c;并由代理对象控制对原对象的引用。它使得客户不能直接与真正的目标对象通信。代理对象是目标对象的代表&#xff0c;其他需要与这个目标对象打交道的操作…

STM32项目分享:OV7670将图片上传电脑

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB板及元器件图 五、程序设计 六、实验效果 七、资料内容 项目分享 一、前言 项目成品图片&#xff1a; 哔哩哔哩视频链接&#xff1a; https://www.bilibili.c…

调用华为API实现车牌识别

目录 1.作者介绍2.华为云车牌识别2.1车牌识别技术2.2华为云OCR 3.实验过程3.1获取API密钥3.2Python代码实现3.3实验结果 参考链接 1.作者介绍 袁明懿&#xff0c;男&#xff0c;西安工程大学电子信息学院&#xff0c;2023级研究生 研究方向&#xff1a;机器视觉与人工智能 电子…

Unity2D计算两个物体的距离

1.首先新建一个场景并添加2个物体 2.创建一个脚本并编写代码 using UnityEngine;public class text2: MonoBehaviour {public GameObject gameObject1; // 第一个物体public GameObject gameObject2; // 第二个物体void Update(){// 计算两个物体之间的距离float distance Vec…

【Redis】为什么是单线程?为什么这么快呢?

Redis为什么是单线程&#xff1f;为什么这么快&#xff1f; Redis&#xff0c;作为一款高性能的内存数据库&#xff0c;广泛应用于各类高并发、高性能的场景中。一个常见的问题是&#xff0c;为什么Redis是单线程的&#xff1f;以及在单线程的情况下&#xff0c;Redis为什么还…

港科夜闻 | 香港科大与香港科大(广州)合推红鸟跨校园学习计划,共享教学资源,促进港穗学生交流学习...

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大与香港科大(广州)合推“红鸟跨校园学习计划”&#xff0c;共享教学资源&#xff0c;促进港穗学生交流学习。香港科大与香港科大(广州)6月14日共同宣布推出“红鸟跨校园学习计划”&#xff0c;以进一步加强两校学…

Linux 上的 TTY 是什么?

在 Linux 系统中&#xff0c;TTY&#xff08;Teletypewriter 的缩写&#xff09;是一个代表终端设备的概念。TTY 是 Linux 操作系统中的一个重要部分&#xff0c;它允许用户与系统进行交互。下面详细讲述 TTY 的相关知识。 TTY 的历史背景 TTY 最早起源于电传打字机&#xff…

【stm32】——基于I2C协议的OLED显示

目录 一、I2C通讯 二、U8G2 1.U8g2简介 2.CubexMX配置 3.移植U8g2 4.编写移植代码 三、显示汉字 四、字体滚动 五、图片显示 总结 一、I2C通讯 IIC(Inter&#xff0d;Integrated Circuit)总线是一种由 PHILIPS 公司开发的两线式串行总线&#xff0c;用于连接微控制器及其外围设…

零代码本地搭建AI大模型,详细教程!普通电脑也能流畅运行,中文回答速度快,回答质量高

这篇教程主要解决&#xff1a; 1). 有些读者朋友&#xff0c;电脑配置不高&#xff0c;比如电脑没有配置GPU显卡&#xff0c;还想在本地使用AI&#xff1b; 2). Llama3回答中文问题欠佳&#xff0c;想安装一个回答中文问题更强的AI大模型。 3). 想成为AI开发者&#xff0c;开…

智能识别技术在旧物回收系统中的优化策略

内容概要&#xff1a; 智能识别技术在旧物回收系统中的应用已经取得了显著的成效&#xff0c;但如何进一步优化其性能以提高回收效率和准确性&#xff0c;仍是我们需要探讨的问题。本文将针对智能识别技术在旧物回收系统中的优化策略进行探讨。 一、算法优化 算法是智能识别…

【好书分享第十一期】深入Rust标准库(文末送书)

文章目录 作者简介概括书籍特色知名大V推荐带来的成长受众人群内容脉络粉丝福利 作者简介 任成珺 拥有超过20年的系统级程序架构及开发经验&#xff0c;至今仍活跃在开发一线。 王晓娜 博士&#xff0c;任职于中国兵器工业集团公司北方科技信息研究所&#xff0c;善于深入浅出…

实战篇:数据展示与报表生成

实战篇&#xff1a;数据展示与报表生成 数据展示与报表生成简介 数据展示是将数据以表格、图形或其他形式展示给用户的过程。报表生成则涉及创建包含特定数据集的文档&#xff0c;通常用于打印或分发。 项目结构 继续使用之前讨论的Flask项目结构。 第1步&#xff1a;数据…

操作符详解(2)

上次我们讲了算术操作符 加减乘除取模 除号 如果你想得到整数&#xff0c;那么两边必须是整数&#xff0c;如果你想得到浮点数&#xff0c;那么你的操作数的两端必须有一个是浮点数 而取模% 两边必须是整数&#xff0c;返回的是整除后的余数 然后我们还讲了左移和右移操作…

Meta-Llama-3-8B 部署

Meta-Llama-3-8B 模型文件地址 LLaMA-Factory 仓库地址 Download Ollama conda create -n llama8b_ python3.10 -y conda activate llama8b pip install -r requirements.txt -i https://pypi.mirrors.ustc.…

搭建Python虚拟环境(二):venv和virtualenv

下面继续详细介绍各种创建虚拟环境的方式 使用 venv 创建Python虚拟环境 在Python开发中&#xff0c;虚拟环境是一个非常重要的概念。它允许我们为每个项目创建独立的环境&#xff0c;这样可以避免不同项目之间的依赖包冲突。venv 是Python用于创建虚拟环境的标准库之一。本文…

网络安全练气篇——OWASP TOP 10

1、什么是OWASP&#xff1f; OWASP&#xff08;开放式Web应用程序安全项目&#xff09;是一个开放的社区&#xff0c;由非营利组织 OWASP基金会支持的项目。对所有致力于改进应用程序安全的人士开放&#xff0c;旨在提高对应用程序安全性的认识。 其最具权威的就是“10项最严重…

浔川身份证号码查询——浔川python科技社

Python获取身份证信息 公民身份号码是每个公民唯一的、终身不变的身份代码&#xff0c;由公安机关按照公民身份号码国家标准编制。每一个居民只能拥有一个唯一的身份证&#xff0c;它是用于证明持有人身份的一种法定证件。 身份证包含了个人的一些重要信息&#xff0c;比如&am…