React踩坑

1、图片引入路径

在react中img的src不能采用<img src="../../images/xxxxx.png" />这类方式直接使用相对路径,因为最后渲染时,这个路径实际上是用变量的样子代替,所以在标签里面用{}包裹。

正确写法:

import luohudongtai from "../../images/luohudongtai.png";

<img src= {luohudongtai} />

2、表单双向绑定

react实现了对Form.Item下的自定义组件自动注入value属性和onChange事件;子组件可以直接通过props调取使用

3、其他组件双向绑定

react的input、select等组件中没有数据双向绑定,可利用useState + value + onChange事件实现

4、子组件向父组件传值

1)通过父组件传递到子组件的方法向父组件传递值

5、useRef使用场景

1)如果我们只是想保存状态不影响视图更新,而且可以同步更新(useState是异步更新)&获取我们的状态,那么就使用 useRef(可以用全局的变量代替,注意命名)

2)用于操作Dom元素,取某个组件的原生事件,如主动调用input的click事件

变量是决定视图图层渲染的变量,请使用useState,其他用途useRef

6、Redux库

需要回调通知state (等同于回调参数) -> action( action是纯声明式的数据结构,只提供事件的所有要素,不提供逻辑)

需要根据回调处理 (等同于父级方法) -> reducer(是一个匹配函数,action的发送是全局的:所有的reducer都可以捕捉到并匹配与自己相关与否,相关就拿走action中 的要素进行逻辑处理,修改store中的状态,不相关就不对state做处理原样返回)

需要state (等同于总状态) -> store(负责存储状态并可以被react api回调,发布action)

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

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

相关文章

数据可视化:揭开数据的视觉奇迹

随着大数据时代的到来&#xff0c;我们面临着海量的数据&#xff0c;如何从中获取有价值的信息成为一项重要的挑战。数据可视化作为一种强大的工具&#xff0c;通过图表、图形和交互界面&#xff0c;将数据转化为可视化的形式&#xff0c;帮助我们更好地理解和分析数据。 数据可…

学习Dubbo前你要了解这些

文章目录 Dubbo的发展背景单一应用架构垂直应用架构分布式服务架构流动计算架构 RPCRPC的简单原理 DubboDubbo是什么Dubbo作者Dubbo的发展历程Dubbo架构 Dubbo发音&#xff1a; |ˈdʌbəʊ| Dubbo官方网站&#xff1a;http://dubbo.apache.org/ Dubbo是阿里巴巴开发的&#…

关系型数据库设计规则

目录 1.1 表、记录、字段 1.2 表的关联关系 1.2.1 一对一关联&#xff08;one-to-one&#xff09; 1.2.2 一对多关系&#xff08;one-to-many&#xff09; 1.2.3 多对多&#xff08;many-to-many&#xff09; 1.2.4 自我引用&#xff08;Self reference&#xff09; 关系…

知识图谱推理的学习逻辑规则(上)7.19+(下)7.20

知识图谱推理的学习逻辑规则 摘要介绍相关工作模型 &#xff08;7.20&#xff09;知识图谱推理逻辑规则概率形式化参数化规则生成器具有逻辑规则的推理预测器 优化E步骤M步骤 实验实验设置实验结果 总结 原文&#xff1a; 摘要 本文研究了在知识图谱上进行推理的学习逻辑规则…

Idea中使用Git详细教学

目录 一、配置 Git 二、创建项目远程仓库 三、初始化本地仓库 方法一&#xff1a; 方法二&#xff1a; 四、连接远程仓库 五、提交与拉取到本地仓库 六、推送到远程仓库 七、克隆远程仓库到本地 方法一&#xff1a; 方法二&#xff1a; 八、Git分支操作 一、配置 G…

zabbix 企业级监控(2) 监控linux主机

目录 配置开始 Zabbix添加linux主机 4.为agent.zabbix.com添加模板 环境&#xff1a; &#xff08;隔天做的更换了IP&#xff0c;不影响实际操作&#xff09; IP 192.168.50.50 关闭防火墙规则 更改主机名 [rootlocalhost ~]# vim /etc/hostname agent.zabbix.com [rootloca…

Zookeeper集群 + Kafka集群

Zookeeper集群 Kafka集群 前言一、Zookeeper 概述1.1 Zookeeper 定义1.2 Zookeeper 工作机制1.3 Zookeeper 特点1.4 Zookeeper 数据结构1.5 Zookeeper 应用场景1.5.1 统一命名服务1.5.2 统一配置管理1.5.3 统一集群管理1.5.4 服务器动态上下线1.5.5 软负载均衡 1.6 Zookeeper …

Pycharm安装dlib

目录 一、下载dilb 二、使用pip安装dlib库(亲测有效) 三、使用Pycharm安装(未使用) 一、下载dilb 官方网址:德利卜 皮皮 (pypi.org) 二、使用pip安装dlib库(亲测有效) 将下载好的whl文件放入工程文件中 接下来使用Python自带的pip进行安装 1.winR2.输入cmd&#xff0c;回车…

stable-diffusion-webui版本更迭

之前的版本在迁移服务器后在新的服务器跑不通了,卧槽,因此填坑了好几天,坑1,坑2,今天终于出坑了,因有此文。 启动方式:nohup python launch.py & 启动脚本:https://download.csdn.net/download/SPESEG/88063114 第二版更新了相关文件,这里是stable-diffusion-…

Word 插件实现读取excel自动填写

日常工作中碰到需要将EXCEL的对应数据记录填写到word文档对应的位置&#xff0c;人工操作的方式是&#xff1a; 打开exel表—>查找对应报告号的行—>逐列复制excel表列单元格内容到WORD对应的位置&#xff08;如下图标注所示&#xff09; 这种方法耗时且容易出错。实际上…

听GPT 讲K8s源代码--pkg(三)

在 Kubernetes 项目中&#xff0c;pkg/controller目录下的子目录通常包含控制器相关的代码和逻辑。控制器是 Kubernetes 中用于管理资源的核心组件之一。它们负责监控资源的状态&#xff0c;并确保其符合所定义的期望状态。下面是对这些子目录的一些常见作用的解释&#xff1a;…

C++:这门语言优势在哪?命名空间以及缺省参数?

文章目录 C的优势解决命名空间的问题 缺省参数 C的优势 C和C语言比起来有许多优势&#xff0c;这里我们先举一个例子&#xff0c;后续进行补充 解决命名空间的问题 首先看这样的代码&#xff1a; #include <stdlib.h> #include <stdio.h>int rand 0;int main(…

【六袆 - windows】windows计划任务,命令行执行,开启计划任务,关闭计划任务,查询计划任务

windows计划任务 查看 Windows 自动执行的指令取消 Windows 中的计划任务启动执行计划任务 查看 Windows 自动执行的指令 您可以使用以下方法&#xff1a; 使用任务计划程序&#xff1a;任务计划程序是 Windows 内置的工具&#xff0c;可以用于创建、编辑和管理计划任务。您可…

Django实现接口自动化平台(十)自定义action names【持续更新中】

相关文章&#xff1a; Django实现接口自动化平台&#xff08;九&#xff09;环境envs序列化器及视图【持续更新中】_做测试的喵酱的博客-CSDN博客 深入理解DRF中的Mixin类_做测试的喵酱的博客-CSDN博客 python中Mixin类的使用_做测试的喵酱的博客-CSDN博客 本章是项目的一…

职责链(Chain of responsibility)模式

目录 处理过程应用场景参与者协作效果实现相关模式应用与思考类图 职责链(Chain of responsibility)是一种对象行为模式&#xff0c;可以使多个对象都有机会处理请求&#xff0c;从而避免请求的发送者和接收者之间的耦合关系。将这些对象连成一条链&#xff0c;并沿着这条链传递…

[ 容器 ] Docker 基本管理

目录 一、Docker 概述1.1 Docker 是什么&#xff1f;1.2 Docker 的宗旨1.3 容器的优点1.4 Docker 与 虚拟机的区别1.5 容器在内核中支持的两种技术namespace的六大类型 二、Docker核心概念2.1 镜像2.2 容器2.3 仓库 三、安装 Docker四、docker 镜像操作五、 Docker 容器操作总结…

js数组常用方法

js数组常用方法 join Array.join() 方法将数组中所有元素都转化为字符串并连接在一起&#xff0c;返回最后生成的字符串。可以指定一个可选的字符串在生成的字符串中来分隔数组的各个元素。如果不指定分隔符&#xff0c;默认使用逗号。示例&#xff1a; var a [1,2,3] cons…

经济和行政手段使双高企业降低能耗总量和能耗强度,提高能源利用效率-安科瑞黄安南

摘要 2022年6月29日工信部、发改委、财政部、生态环境部、国资委、市场监管总局六部门联合下发《关于印发工业能效提升行动计划的通知》&#xff08;工信部联节〔2022〕76号&#xff0c;以下简称《行动计划》&#xff09;&#xff0c;主要目的是为了提高工业领域能源利用效率&…

修复git diff正文中文乱码

Linux git diff正文中文乱码 在命令行下输入以下命令&#xff1a; $ git config --global core.quotepath false # 显示 status 编码 $ git config --global gui.encoding utf-8 # 图形界面编码 $ git config --global i18n.commit.encoding utf-8 # …

Ubuntu18.04 拯救者R9-7945HX 4060 配置ZED 2i代双目相机驱动+ORBSLAM2

AMD的拯救者网卡很拉&#xff0c;研究了很久除了换网卡可以解决网络问题&#xff0c;其它没找到合适的办法&#xff0c;这里我用手机USB共享网络的方式勉强上网&#xff0c;这里不得不说华为的信号桥很好用。 之前在1050ti的电脑上布置过&#xff0c;很顺利&#xff0c;这个新…