当前位置: 首页 > news >正文

重温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()}
}

相关文章:

重温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><…...

lock-锁的概念

锁的简介 锁是计算机协调多个进程或线程并发访问某一资源的机制&#xff08;避免发生资源争抢&#xff09; 在并发环境下&#xff0c;多个线程会对同一个资源进行争抢&#xff0c;可能会导致数据不一致的问题。为了解决这一问题&#xff0c;需要通过一种抽象的锁来对资源进行…...

Docker 可用镜像源

当使用 docker 发现拉取不到镜像时&#xff0c;可以编辑 /etc/docker/daemon.json 文件&#xff0c;添加如下内容&#xff1a; 这文章不涉及政治&#xff0c;不涉及敏感信息&#xff0c;三番五次的审核不通过&#xff0c;一删再删&#xff0c;只好换图片了。 重新加载服务配置…...

MySQL 搭建主从报错 1236

错误信息&#xff1a; Last_IO_Error: Got fatal error 1236 from source when reading data from binary log: Could not find first log file name in binary log index file 大致内容&#xff1a; MySQL 在尝试从二进制日志&#xff08;binary log&#xff09;中读取数据…...

华为OD机试真题2024版-求幸存数之和

题目描述\n给一个正整数列 nums,一个跳数 jump,及幸存数量 left。运算过程为:从索引为 0 的位置开始向后跳,中间跳过 J 个数字,命中索引为 J+1 的数字,该数被敲出,并从该点起跳,以此类推,直到幸存 left 个数为止。然后返回幸存数之和。\n约束: 1、0 是第一个起跳点。…...

Python - 各种计算器合集【附源码】

计算器合集 一&#xff1a;极简版计算器二&#xff1a;简易版计算器三&#xff1a;不简易的计算器四&#xff1a;还可以计算器 一&#xff1a;极简版计算器 运行效果&#xff1a; import tkinter as tk import tkinter.messagebox win tk.Tk() win.title("计算器")…...

【已解决】better-scroll在PC端如何开启鼠标滚动以及如何始终显示滚动条

总结 需要安装插件 mouse-wheel 和 scrollbar 在PC端如何开启鼠标滚动? 需要安装官方提供的滚动插件&#xff1a;mouse-wheel https://better-scroll.github.io/docs/zh-CN/plugins/mouse-wheel.html 为了开启鼠标滚动功能&#xff0c;你需要首先引入 mouseWheel 插件&…...

AJAX 综合案例-day2

Bootstrap 弹框 功能&#xff1a;不离开当前页面&#xff0c;显示单独内容&#xff0c;供用户操作 步骤&#xff1a; 1. 引入 bootstrap.css 和 bootstrap.js 2. 准备 弹框标签 &#xff0c;确认结构 3. 通过 自定义属性 &#xff0c;控制弹框的 显示 和 隐藏 1. 通过属性…...

【Esp32连接微信小程序蓝牙】附Arduino源码《 返回10007 相同特征id冲突问题》

前言 最近接了一个外包&#xff0c;发现了esp32连接小程序会有很多bug&#xff0c;所以接下来会慢慢更新解决方案&#xff0c;还是需要多接触项目才能进步呀兄弟们&#xff01; 附上uuid的生成链接&#xff1a; // See the following for generating UUIDs: // https://www.uu…...

并发控制技术

事物的隔离性实现主要依赖于多种并发控制技术,这些技术确保在并发执行的事物中,一个事物的操作不会被其他事物干扰。并发控制技术按照其对可能冲突的操作采取的不同策略可以分为乐观并发控制和悲观并发控制两大类。 基于封锁的并发控制 对于并发可能冲突的操作,比如读-写,…...

什么是网段

一、A类地址的网段&#xff1a; 情况1&#xff1a;最小的网段就是xxx.0.0.0&#xff0c;直接使用第一段的网络地址做网段。 情况2&#xff1a;如果希望网段允许的主机数量的范围缩小&#xff0c;扩大网段值即可&#xff0c;xxx.xxz.zzz.zzz&#xff0c;比如xxx.xxx.xzz.zzz&…...

PHP和Mysql前后端交互效果实现

一、连接数据库基本函数 mysqli_connect(); 作用&#xff1a;创建数据库连接&#xff0c;打开一个新的mysql的连接。传参顺序&#xff1a;数据库地址、数据库账号、数据库密码 <?phpecho mysqli_connect("localhost",root,root) ?> /*结果&#xff1a;F…...

vue小总结

知识总结 【 1 】es6 语法总结 # let 定义变量 # const定义常量 ------块级作用域---- # var 以后尽量少用&#xff0c;函数作用域var 在 JavaScript 中是函数作用域或全局作用域。而 let 和 const 是块级作用域。 // 使用 var 声明全局变量 var globalVar "Im a globa…...

RapidLayout:中英文版面分析推理库

引言 继上一篇文章之后&#xff0c;我这里想着将360发布的版面分析模型整合到现有的rapid_layout仓库中&#xff0c;便于大家快速使用。 不曾想到&#xff0c;我这整理工作越做越多了&#xff0c;好在整体都是往更好方向走。 起初&#xff0c;rapid_layout项目是在RapidStru…...

postman 工具下载安装使用教程_postman安装

本文讲解的是postman工具下载、Postman安装步骤、postman下载、postman安装教程。Postman是一款流行的API测试工具&#xff0c;它提供了一个用户友好的界面&#xff0c;用于发送和测试API请求&#xff0c;并且可以轻松地按需管理和组织请求。 这使得开发人员和测试人员能够更高…...

【数学建模】——【新手小白到国奖选手】——【学习路线】

专栏&#xff1a;数学建模学习笔记 目录 ​编辑 第一阶段&#xff1a;基础知识和工具 1.Python基础 1.学习内容 1.基本语法 2.函数和模块 3.面向对象编程 4.文件操作 2.推荐资源 书籍&#xff1a; 在线课程&#xff1a; 在线教程&#xff1a; 2.数学基础 1.学习内…...

CSS文本超限后使用省略号代替

方案一&#xff1a; 只显示一行&#xff0c;超限后使用省略号代替 .detail {overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }方案二&#xff1a; 显示多行&#xff0c;到最后一行还没有显示完&#xff0c;则最后一行多出来的部分使用省略号代替。 .detai…...

多线程下JVM内存模型 和 volatile关键字

1、线程的概念 线程&#xff08;thread&#xff09;是操作系统能够进行运算调度的最小单位。它被包含在进程之中&#xff0c;是进程中的实际运作单位。一条线程指的是进程中一个单一顺序的控制流&#xff0c;一个进程中可以并发多个线程&#xff0c;每条线程并行执行不同的任务…...

Uniapp实现页面滚动Tab吸顶,点击tab内容滚动到对应tab内容位置

思路&#xff1a;运用uniapp原生提供方法uni.createSelectorQuery()获取滚动对应节点的信息&#xff0c;即节点距离页面顶部的距离&#xff0c;再通过uniapp原生监听页面滚动事件onPageScroll&#xff0c;获取页面内容滚动的高度&#xff0c;二者相加即定位到对应节点的滚动距离…...

在Elasticsearch中-SpaceJam一个全文搜索的实例

在Elasticsearch中进行全文搜索通常涉及几个步骤&#xff1a;创建索引、定义映射、索引文档、执行搜索查询。下面我将通过一个名为"SpaceJam"的虚构实例来演示如何进行全文搜索。 ### 步骤 1: 创建索引 首先&#xff0c;我们需要创建一个索引。在这个例子中&#x…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...

MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

java 局域网 rtsp 取流 WebSocket 推送到前端显示 低延迟

众所周知 摄像头取流推流显示前端延迟大 传统方法是服务器取摄像头的rtsp流 然后客户端连服务器 中转多了&#xff0c;延迟一定不小。 假设相机没有专网 公网 1相机自带推流 直接推送到云服务器 然后客户端拉去 2相机只有rtsp &#xff0c;边缘服务器拉流推送到云服务器 …...

Spring Boot SQL数据库功能详解

Spring Boot自动配置与数据源管理 数据源自动配置机制 当在Spring Boot项目中添加数据库驱动依赖&#xff08;如org.postgresql:postgresql&#xff09;后&#xff0c;应用启动时自动配置系统会尝试创建DataSource实现。开发者只需提供基础连接信息&#xff1a; 数据库URL格…...