React 初学 - 字符串形式的refs - 个人笔记24

最新推荐文章于 2023-03-10 15:03:29 发布
最新推荐文章于 2023-03-10 15:03:29 发布
阅读量156 收藏
点赞数
分类专栏： react.js 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amnesiac666/article/details/118916589
版权

组件内的标签可以定义ref来标识自己

箭头函数中的this，指向实例对象
在这里插入图片描述

会发现类中有个refs属性
在这里插入图片描述

给类中某个dom添加ref，就可以在类中refs属性中看到
在这里插入图片描述

在这里插入图片描述
如果给多个标签添加ref属性
在这里插入图片描述
在这里插入图片描述
注意：
this.refs拿到的是真实Dom
在这里插入图片描述

在这里插入图片描述
同样，使用onBlur来触发函数：

在这里插入图片描述

在这里插入图片描述

公孙元二
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【React工作记录五】如何处理数据格式字符串让它加上标签
geyaoisnice的博客
12-09 598
前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 需求 今天我们公司领导找我 说这边有个需求需要你做一下 就是一个ant design table得table栏里面返回了一些数据格式 首先我们来看看数据格式 每一个人或动植物，\r\n都是由阴阳两种能量组合而成。 \r\n男人身上有51%是阳性能量 ，\r
use-dynamic-refs:动态设置和获取 Refs 的 React 钩子
05-31
React使用动态参考用 create-react-library 制作安装npm install --save use-dynamic-refs用法 import React , { useEffect } from 'react' ;import useDynamicRefs from 'use-dynamic-refs' ;const Example = ( ) =...
【react】string类型的ref（过时的api，可能会在未来的版本中移除，不推荐使用）
bbt953的博客
03-10 337
string类型的ref（过时的api，可能会在未来的版本中移除，不推荐使用）
reactjs refs的使用: 字符串形式的ref
学亮编程手记
07-26 195
reactjs refs的使用: 字符串形式的ref
react--模板字符串的应用
ZhaoYulin6的博客
05-14 1577
1.变量名作为属性值： 使用中括号 var selected_item = { [type[0]]:true, [type[1]]:false, }; 2.属性值嵌套模板字符串 var selected_item = { [`type[${key}]`]:true [type[1]]:false, }; 打印结果: 3.模板字符串嵌套三元运算符 let rge = `历年${props.range[0]}月${props.range[0] !== props
React基础之Refs的理解与使用
zsytoysz的博客
11-05 2898
我们在使用React写代码的时候对Refs的使用比较少，因为我们很少直接操作底层DOM元素，而是通过在里编写我们的页面结构，再由React来组织DOM元素的更新。而在少数情况中，有些需求要求我们对页面的真实DOM进行直接操作，这就要求我们有直接访问真实DOM的能力，而Refs就为我们提供了这种能力。官方文档对Refs的描述是：Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素。
react-string-replace:一种使用React组件安全地进行字符串替换的简单方法
05-11
React字符串替换 一种使用React组件安全地进行字符串替换的简单方法 又名将字符串转换为React组件的数组 安装 $ npm install --save react-string-replace 用法 简单的例子 const reactStringReplace = require ( '...
react-truncate-string:像黄油一样截断字符串
04-24
React截断字符串 像黄油一样截断字符串。 特征 它会在中间截断很长很长很长...很长很长的弦！ 要求 该库依赖于空格进行截断。 感谢。 演示： : :rocket: 超快的 :rainbow: 超轻：1.76 KB 目录 贡献 去做 执照 ...
react-split-pane：React拆分窗格组件
02-05
React拆分窗格 ...npm install react-split-pane # or if you use yarn yarn add react-split-pane # # Example Usage ` ` ` jsx < /SplitPane > < SplitPane split = " vertical " minSize =
react-类似LinkedState但用于Refs支持Preact与React
08-14
项目"react-类似LinkedState但用于Refs支持Preact与React"可能实现了一个功能，即提供了一种方法，让开发者可以像使用`LinkedState`那样方便地管理和更新`refs`。这可能包括创建一个高阶组件（HOC）或者钩子函数...
react中ref使用函数或字符串的区别：String类型的Refs有什么问题
Winne_Shen的专栏
10-15 1955
摘自：https://zh-hans.reactjs.org/docs/refs-and-the-dom.html 上面一文说「不建议使用它（指String类型的ref属性），因为string类型的refs存在一些问题。」 我们跳转链接来到github，来看gaearon的回复。 举例： 说明： 使用string类型的refs存在一些问题： 首先，由于它无法知道this，所...
React的三大属性之refs的一些简单理解
ｎｅｗｘｃ
09-15 1177
什么是refs? Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。 Ref转发是一项将ref自动通过组件传递到子组件的技巧。 通常用来获取DOM节点或者React元素实例的工具。在React中Refs提供了一种方式，允许用户访问dom节点或者在render方法中创建的React元素。 refs的使用场景 在某些情况下，我们需要在典型数据流之外强制修改子组件，被修改的子组件可能是一个 React 组件的实例，也可能是一个 DOM 元素，例如.
reactjs组件实例三大属性之refs使用示例：字符串形式的ref、回调函数形式的ref、回调ref中回调执行次数的问题
学亮编程手记
02-27 618
1_字符串形式的ref <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1_字符串形式的ref</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 -->
Module not found: Error: Can‘t resolve ‘react-dom/client‘
树上骑个猴的博客
07-04 3933
解决方案 当你的react版本低于18时,可以采用如下方案
Functions are not valid as a React child. This may happen if you return a Component instead of
树上骑个猴的博客
06-26 3166
报错信息：Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.使用一个{} 去渲染一个组件 就会报这样一个错误例如 是一个组件使用时不小心写成了 所以报上面的错误应该将 改为...
React 初学 - 使用 Array.map() 以及Array.Filter() 动态渲染元素 - 个人笔记53
树上骑个猴的博客
08-11 2982
条件渲染很有用，但是你可能需要组件来渲染未知数量的元素。通常在响应式编程中，程序员在应用程序运行时之前无法知道其 state，因为这在很大程度上取决于用户与该程序的交互。程序员需要提前编写代码来正确处理未知状态。在 React 中使用Array.map()阐明了这个概念。 在constructor中，创建一个this.state对象并定义两个 state：userInput应该初始化为空字符串，toDoList应该初始化为空数组。接下来，删除items变量旁边render()方法中的注释。取而代之的是，将存
React 初学 - 使用三元表达式进行条件渲染 - 个人笔记51
树上骑个猴的博客
08-11 2475
在继续使用动态渲染技术之前，还有最后一种方法可以渲染你想要的东西，它使用内置的 JavaScript 条件：三元运算符。三元运算符经常被用作 JavaScript 中if/else语句的缩写。它们不像传统的if/else语句那样健壮，但是在 React 开发人员中非常流行，原因之一就是 JSX 的编译原理，if/else语句不能直接插入到 JSX 代码中。你可能在前几个挑战就注意到了这一点–当需要if/else语句时，它总是在return语句外面。如果你想在 JSX 中实现条件逻辑，三元表达式是一个很好的选
React dangerouslySetInnerHTML - 将HTML字符串解析为html样式显示
最新发布
05-16
React中的`dangerouslySetInnerHTML`属性允许你将一个包含HTML标签和内容的字符串解析为HTML样式并显示在页面上。这个属性的使用是被认为是“危险”操作，因为它可以导致跨站脚本攻击（XSS攻击）。 使用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值