React DOM document.querySelector的替代

最新推荐文章于 2024-05-23 19:35:32 发布

weixin_45703889

最新推荐文章于 2024-05-23 19:35:32 发布

阅读量650

点赞数

分类专栏： react 文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_45703889/article/details/124468362

版权

React ref document.querySelector 替代方案 DOM操作

关键词由CSDN通过智能技术生成

react 专栏收录该内容

3 篇文章

订阅专栏

React DOM document.querySelector的替代

使用 ref 进行替代,ref 能将节点暴露出来,让你在组件中任何位置使用.但ref应该避免滥用,详情请参考 react 文档

使用方式

const qrimgRef = React.useRef();
//需要使用时可通过 current 访问 src 或其他属性.
qrimgRef.current.src = qrimg;
//在需要获取的节点传入对应的 ref
<QrImg ref={qrimgRef}></QrImg>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_45703889

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

React方向：react中5种Dom的操作方式

qq_24428851的博客

01-13

748

但是需要值得一提的是，官方的refs将在未来的时间段内会被废除，并且因ref挂载的节点是挂载在组件实例上，因此函数不能使用es5的写法，如果使用es5的写法，需要.bind去更改this指向，否则this.refs拿到的将是undefined。即将被删除，因此，新版本 React 不推荐使用ref string去操作DOM，转而推荐我们使用 ref callback的使用方式，通过这种方式挂载到实例对象上面，只需要在回调函数中使用this.属性名即可。最后编辑于：2025-01-11 21:04:59。

分享react+three.js展示温湿度采集终端

通达的博客

03-28

1439

react+three.js模拟温湿度采集终端。应用程序的模块化理念，使用模块来构建你的代码。通过将实现隐藏在一个简单的接口后面，您可以使您的应用程序万无一失且易于使用。它只做它应该做的，没有别的。通过隐藏实现，我们对使用我们代码的人实施了良好的编码风格。您可以访问的实现越多，它就越有可能成为您以后必须处理的复杂的半生不熟的“修复”。创建3D场景时，唯一的限制是您的想象力 - 以及您的技术知识深度。要点是如何描述3D空间的坐标系和用于在坐标系内移动对象。

参与评论您还未登录，请先登录后发表或查看评论

原生 js 获取 dom 元素 querySelector() 替代 getElementById()

学习笔记

03-11

1691

原生 js 获取 dom 元素 querySelector() 替代 getElementById() 替代 getElementById() 很长一段时间以来，除了 jQuery 的选择器之外，我一直在用下面这几个方法获取 dom 元素 document.getElementById() document.getElementsByClassName() document.getElement...

querySelector() 方法与 querySelectorAll() 方法

nuanpang的博客

08-19

431

querySelector() 方法与 querySelectorAll() 方法

query获取整个节点html,JavaScript如何获取dom元素querySelector()替代getElementById()

weixin_32661017的博客

06-07

273

JavaScript如何获取dom元素querySelector()替代getElementById()发布时间：2020-07-09 17:28:38来源：亿速云阅读：183作者：Leah这期内容当中小编将会给大家带来有关JavaScript如何获取dom元素querySelector()替代getElementById()，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以...

React 入门教程 querySelectorAll() 方法遇到的问题

jieming2002的博客

10-12

3816

虽然是英文版的，但是写得简洁明了。 https://reactjs.org/docs/add-react-to-a-website.html 打开页面之后，搜索: Reuse a Component 找到复用组件这一节。点击这一节中的：Download the full example (2KB zipped) 代码很小，只有两个文件，直接在浏览器打开 index.html 即可看效果。存在的...

如何简写出 document.querySelectorAll?

在下魔王ii的博客

11-13

668

看了一篇风趣幽默的文章，简单记录一下~ 1.原生DOM选择器 document.getElementById document.getElementsByClass document.getElementsByName document.getElementsByTagName 写出来我都感觉麻烦了~接下来看看jQuery的语法糖 2.jQuery封装的DOM选择器 document.querySelector document.querySelectorAll 但是，名字太长了，就像电影里

document.querySelector用ref

01-14

### 使用 React `ref` 替代 `document.querySelector` 在 React 中，推荐使用 `ref` 来访问 DOM 节点而不是传统的 JavaScript 方法如 `document.querySelector()`。这不仅提高了代码的可维护性和性能，还更好地遵循...

一、添加PPT页面检测 Javascript // 在setTimeout内添加类型判断 if (document.querySelector('.ppt-container')) { handlePPT(); } else if (document.querySelector('video')) { handleVideo(); } 二、PPT处理函数 Javascript function handlePPT() { let currentPage = 1; const totalPages = document.querySelectorAll('.ppt-page').length; // 自动翻页定时器 const pptInterval = setInterval(() => { if(currentPage >= totalPages) { clearInterval(pptInterval); yaweeEnd(); return; } document.querySelector('.next-page-btn').click(); currentPage++; }, 5000); // 每5秒翻页 } 三、改进yaweeEnd函数 Javascript function yaweeEnd() { // 统一处理跳转逻辑 const nextBtn = document.querySelector('.next-course-btn') || document.querySelector('#doNext'); if(nextBtn) { nextBtn.click(); } else { console.log('已到达最后一节'); window.location.reload(); // 刷新检测新课程 } } 四、增加异常处理 Javascript // 在原有逻辑外层添加 try { // 原有视频处理逻辑... } catch (e) { console.error('视频处理失败，尝试PPT处理'); handlePPT(); } 这些代码具体添加在那

最新发布

03-22

现在需要检查是否有遗漏的部分，比如如何检测页面是否可见，可能需要用到Page Visibility API，或者MutationObserver来监听DOM变化。同时，自动翻页的时间间隔是否可配置，是否需要提供配置选项让用户自定义。总结...

react-dom.development.js:29345 Uncaught Error: createRoot(...): Target container is not a DOM element.

06-07

这个错误通常是由于没有找到正确的 DOM 元素导致的，可以根据错误信息...在这个示例中，我们使用 `document.querySelector("#root")` 方法来获取具有 `id="root"` 的元素，然后将其传递给 `createRoot` 方法进行挂载。

十三、前端基本功：DOM练习.rar

05-30

在前端开发领域，DOM（Document Object Model）是网页内容的结构化表示，它是一个标准的树型模型，...同时，DOM也是学习其他前端框架，如React、Vue等的基础，理解并熟练运用DOM是成为一名优秀前端开发者的关键步骤。

queryselector_修复流节点问题“未知的属性querySelector”

Web 开发&软件开发

08-06

377

修复流节点问题“未知的属性querySelector” Flow是许多React项目中使用的静态类型检查器，有时感觉像是礼物和诅咒。礼物，因为它可以识别代码中的弱点，还有一个诅咒，有时您会觉得自己不必要地调整代码来满足Flow的要求。我已经对Flow产生了赞赏，但这并不意味着我最终会花费额外的时间来寻找新的编码方法。最近，我遇到了一个问题：我在React元素中查询一个节点，然后在...

原生JS替代jQuery的各种方法汇总(你不需要JQuery)

极客神殿

07-19

3124

前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法，暂时只支持 IE10 以上浏览器。 Query Selector 常用的 class、...

vue中ref的作用

qq_29078779的博客

11-05

415

vue中的ref其实功能很强大，下面介绍一下如何使用。基本用法，本页面获取dom元素 <template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </...

React项目知识积累（二）

吃蛋糕的居居

05-23

573

是 JavaScript 中的一个内置方法，用于选择多个元素并返回一个 NodeList 对象。在上述例子中，选择了所有元素，并将它们存储在一个NodeList对象中。可以使用length属性获取所选元素的数量，并使用索引获取每个元素的属性和内容。需要注意的是，返回的是一个静态的 NodeList 对象，这意味着如果匹配的元素发生变化，NodeList 不会自动更新。如果需要动态更新匹配的元素列表，请使用或者其他动态查询节点的方法。

React Hooks基本使用详解

LittleRoundFace的博客

09-15

726

React Hooks基本使用详解 Hooks let you use state and other React features without writing a class Hooks可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性一、类组件不足：状态难以复用（渲染属性Render Props、高阶组件HOC、Mixin、Hooks可以解决这个问题）在hooks出来之前，常见的代码重用方式是 HOC 和render props，这两种方式带来的问题是：你

前端常见题目4

qq_56918166的博客

05-21

240

Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件。它采用集中式存储管理应用的所有组件的状态，而更改状态的唯一方法是提交mutation。其中的5个属性分别是state,actions,mutations,getters,modules在state中存储的值，要通过mutation里面注册一个mutation并在组件中使用提交mutation来改变state中的值。

React中的组件

weixin_45757442的博客

03-03

174

组件 react 当中的组件：状态组件与无状态组件（函数组件）无状态组件组件的名字首字母要大写。函数的名字即是组件的名字，函数的返回值即是组件的内容返回的内容有且只能有一个根元素必须要有return 实例说明 <div id="root"></div> <script type="text/babel"> /* react当中的组件...

学习笔记-react学习笔记

qq_44929535的博客

11-12

1099

react 构建用户界面的javaScript库，主要用于构建UI界面，Instagram, 2013年开源。特点： 1.声明式的设计 2.高效、采用虚拟DOM来实现DOM的渲染，最大限度的减少DOM的操作。 3.灵活，跟其他库灵活搭配使用。 4.JSX，俗称js里面写HTMl,javascript 语法的扩展。 5.组件化，模块化，代码容易复用发，2016年之前大型项目非常喜欢。 6.单向数据流，没有实现数据的双向绑定，数据=》视图=>事件=》数据创建项目 1.CDN引入，仅用户学习调试 2.脚