React飞行日记(七) - 在React中使用DOM操作

最新推荐文章于 2022-10-03 00:00:00 发布
最新推荐文章于 2022-10-03 00:00:00 发布
阅读量376 收藏
点赞数 1
分类专栏： 7.React飞行日记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44038881/article/details/107051500
版权

×在React中使用DOM操作

React中很少直接用到DOM操作, 因为所有的功能都可以基于数据驱动来完成, DOM是框架帮我们做的事情, 但是也有些喜欢用DOM操作的开发者, 那么看看如何在React中使用DOM操作

通过ref进行DOM操作

1. refs

React中提供通过操作DOM来实现需求的方式, 那就是refs, it是一个对象, 存储了当前被渲染组件中的非受控组件

有两种方法挂载非受控组件ref

  1. 常规操作 : 挂载到this.refs上在这里插入图片描述[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QmPdSipg-1593525238182)(React.assets/image-.png)]

  2. 特殊操作 : 挂在到this实例上

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tAj8VcpB-1593525238185)(React.assets/image-.png)]

    效果图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5MaCDucw-1593525238188)(React.assets/3.gif)]

狄鸠
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react获取dom元素_如何在React中引用DOM元素
cuk0051的博客
08-28 3528
react获取dom元素React is great at abstracting away the DOM from you when building apps. 在构建应用程序时，React擅长从您那里提取DOM。 But what if you want to access the DOM element that a React component represents? 但是...
React useRef的简单使用：改变DOM元素的值
u010234868的专栏
09-20 1015
变量textRef用于接收useRef()方法的返回值，在需要获取的DOM元素上绑定ref属性为textRef，textRef对象内部的current属性对应着我们需要的DOM元素对象。useRef 用来获取DOM元素对象，对DOM进行操作，监听事件等。
react中操作dom
CherryLee_1210的博客
10-26 3845
当我们在react中需要做一些dom操作时，就会使用到react给我们预留的“后门”。 之所以称之为“后门”，是因为当前流行框架react/vue出现的目的就是避免操作dom，造成渲染浪费。然而很多时候不能不操作dom。 1、通过React.createRef()/useRef();来创建一个ref变量。 // 类组件中 constructor (props) { super(props); this.myRef = React.createRef(); } // 函数组件中（使用hooks
React踩坑笔记 —— React中的Dom操作
洛丹伦的夏天
12-15 1万+
在React中操作Dom有四种方式： 通过非受控组件‘ref’； 通过事件处理器event参数，获取eventTarget； 通过原生JavaScriptDom选择器； 通过Dom操作插件，例如Jquery； 其中ref方式为React方式，其他方式都为React以外的方式； 必须要明白： React不会知道React以外的方式对Dom做出的改变，它基于自己内部的表现来决定如何更...
React获取DOM和获取组件实例的方式
m0_71485750的博客
10-03 1万+
当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性;来绑定函数组件中的某个元素, forwardRef中接收两个参数, 参数一: props, 参数二: ref，后面我们也会学习 hooks 中如何使用ref;该函数会在DOM被挂载时进行回调，这个函数回调时会传入一个元素对象，我们可以自己保存;方式提前创建出来一个对象, 将创建出来的对象绑定到要获取的元素上;使用时，直接拿到之前保存的元素对象即可;
react中的DOM操作
weixin_33749131的博客
04-04 567
前面的话 　　某些情况下需要在典型数据流外强制修改子代。要修改的子代可以是 React 组件实例，也可以是 DOM 元素。这时就要用到refs来操作DOM   使用场景 　　下面是几个适合使用 refs 的情况 　　1、处理焦点、文本选择或媒体控制 　　2、触发强制动画 　　3、集成第三方 DOM 库 　　如果可以通过声明式实现，则尽量避免使用 refs 　　[注意]不要在 Di...
react-native-dom:如何使用react-native-dom在Web浏览器中运行React Native应用程序
05-09
React本国 一个实验性的，全面的React Native到Web的端口。 默认情况下为多线程：遵循与移动版React Native完全相同的架构，您所有的react...要获得React-native入门方面的帮助，请查看在线。 1. 2.克隆存储库 $ http
react-tiny-dom:using使用react-reconciler的react-dom的最小实现
04-12
目前尚不支持react-dom的以下功能，但我可能会添加它们： Web组件 故意不支持任何其他无助于解释Renderer API ，例如dangerouslySetInnerHTML ，以使源代码最小化并着眼于简单性。 安装 npm install npm start # ...
react-beautiful-dnd：使用React进行列表的漂亮易用的拖放操作
02-05
我们创建 帮助您尽快开始使用react-beautiful-dnd 。 当前支持的功能集 :check_mark_button: 垂直清单 :up-down_arrow: 水平清单 :left-right_arrow: 列表之间的移动（▤ :left-right_arrow: ▤） -以60fps的...
react-web-component:使用React创建Web组件
05-23
React Web组件可作为npm上的react-web-component软件包使用。 yarn add react-web-component 基本用法 要创建带有react-web-component ，只需将React组件作为第一个参数传递给ReactWebComponent.create ，并将您要...
React专题：操作DOM
roamingcode的博客
08-30 193
React存在的意义就是状态与UI分离，使开发者不知有DOM，无论魏晋。 不过有些状态是无法与UI分离的，比如说表单的聚焦，复杂的动画等等。 怎么办？在React完全控制DOM之前，它还是给开发者留了后门。 this.refs [emoji:alien]这是React不再推荐使用的API。 每一个class组件实例化的时候都会挂载一个refs属性，它就是用来存储DOM引用的。...
react.js 获取真实的DOM节点实例(必看)
11-26
为了获取真实的dom节点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <input type="text" ref="myTextInput" /> <input type="button" value="Focus t
React 操作DOM元素的两种方式
m0_37068028的博客
09-03 1万+
1. 使用选择器var Btn = document.getElementById('btn') 2.使用ref
React 基础 useEffect 操作 DOM
zengxingX的博客
12-14 2626
使用技巧 参数：在获取DOM 时 ，一般都设置Null 返回值：返回一个带有 Current 属性的对象，通过该对象可以得到DOM对象或者类组件实例 useEffect 获取DOM 1.使用useRef 创建一个有 current 属性的 ref 对象，{current：null} const xxxRef = useRef(null) 2.通过DOM 的ref 属性 和上面创建的对象进行关联 <div ref={xxxRef}></div> 3. 通过 x.
浅谈React 一 操作DOM（旧版）
Liingot的博客
12-24 1471
hello ，大家中午好，无聊的周末过去了，写代码让我们不在孤单，抽中午吃饭时间给大家分享一下React操作DOM的方法。 一：setSate（第一种方法） 使用setState来进行DOM的刷新，这个方法和小程序的用法是一样的 使用this.setState改变写法是Key，value来写。 二：ReactDOM（第二种方法） 这里咱们需要用到ReactDOM先引入react-dom 改变D...
ReactJS读书笔记五:DOM操作
言川的博客
06-25 2万+
一 获取DOM元素 react可以允许我们通过 ref 来定位一个组件。具体的做法是： 先给一个组件设置一个 ref=‘xxx’ 的属性，注意这个ref必须是全局唯一的。 然后就可以通过 this.refs.city 来访问这个组件。 但是请注意，这里拿到的只是虚拟DOM，而不是真实的DOM。 只有在render方法执行之后，并且react已经完成了D
react的虚拟DOM转换成DOM过程
liuyang1106的博客
05-14 6203
1：babel的支持    我们知道HTML5文本中，我们是无法使用jsx的，例如，下面的定义就会出错：   let vdom = (&lt;div id="box"&gt; &lt;div&gt;hello ,World!&lt;/div&gt; &lt;span&gt;你好吗&lt;/span&gt; &lt;/div&gt; )    babel也提供了
React获取DOM方法
热门推荐
liangzelei的博客
08-31 3万+
以下提供三种方法： import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class Index extends Component { onClick(event){ console.log(event.target.value); // 第一种方式 var subm
React获取DOM方法2018
cloveryuan的博客
07-09 9839
以下提供三种方法：1. js 常规dom操作方式，通过id获取dom2.react原生函数findDOMNode获取dom3.通过ref来定位一个组件，切记ref要全局唯一（类似id）import React, { Component } from 'react';import ReactDOM from 'react-dom'; class Index extends Component { ...
react 最新版本 匹配的 react-dom react-router-dom
最新发布
06-03
当前最新版本的React是17.x，...如果您在使用React Router时遇到了问题，还应该确保React和React Router的版本匹配。如果您使用的是旧版本的React Router，请查看React Router官方文档以获取有关版本兼容性的更多信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值