详解React获取DOM和获取组件实例的方式

目录
  • React获取DOM的方式
    • ref获取DOM元素
    • ref获取组件实例

React获取DOM的方式

ref获取DOM元素

在React的开发模式中,通常情况下不需要、也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作:

管理焦点,文本选择或媒体播放;

触发强制动画;

集成第三方 DOM 库;

我们可以通过refs获取DOM;

如何创建refs来获取对应的DOM呢?目前有三种方式:

方式一:传入字符串(这种做法已经不推荐)

在React元素上绑定一个ref字符串, 使用时通过 this.refs.传入的字符串格式获取对应的元素;

import React, { PureComponent } from 'react'

export class App extends PureComponent {
  getDom() {
    // 方式一
    console.log(this.refs.hello) // <h2>Hello World</h2>
  }

  render() {
    return (
      <div>
        <h2 ref="hello">Hello World</h2>
        <button onClick={() => this.getDom()}>获取DOM</button>
      </div>
    )
  }
}

export default App

方式二:传入一个对象(常用的方式, 推荐)

在react中导入createRef, 通过createRef() 方式提前创建出来一个对象, 将创建出来的对象绑定到要获取的元素上;

使用时获取到创建的对象其中有一个current属性就是对应的元素;

import React, { PureComponent, createRef } from 'react'

export class App extends PureComponent {
  constructor() {
    super()

    // 提前创建一个ref对象
    this.titleRef = createRef()
  }

  getDom() {
    // 方式二
    console.log(this.titleRef.current) // <h2>Hello World</h2>
  }

  render() {
    return (
      <div>
        <h2 ref={this.titleRef}>Hello World</h2>
        <button onClick={() => this.getDom()}>获取DOM</button>
      </div>
    )
  }
}

export default App

方式三:传入一个函数(了解)

该函数会在DOM被挂载时进行回调,这个函数回调时会传入一个元素对象,我们可以自己保存;

使用时,直接拿到之前保存的元素对象即可;

import React, { PureComponent, createRef } from 'react'

export class App extends PureComponent {
  getDom() {
  }

  render() {
    return (
      <div>
        <h2 ref="hello">Hello World</h2>
        <h2 ref={this.titleRef}>Hello World</h2>
        {/* 方式三, 回调函数会返回el, el就是我们要获取的DOM了 */}
        <h2 ref={el => console.log(el)}>Hello World</h2>
        <button onClick={() => this.getDom()}>获取DOM</button>
      </div>
    )
  }
}

ref获取组件实例

ref 的值根据节点的类型而有所不同:

当 ref 属性用于 HTML 元素时,构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性;

当 ref 属性用于自定义 class 组件时,ref 对象接收组件的挂载实例作为其 current 属性;

不能在函数组件上使用 ref 属性,因为他们没有实例;

这里我们演示一下ref获取一个class组件对象的实例:

import React, { PureComponent, createRef } from 'react'

// 创建一个类组件, 作为子组件测试
class Test extends PureComponent {
  test() {
    console.log("Test");
  }
  render() {
    return <h2>Test</h2>
  }
}

export class App extends PureComponent {
  constructor() {
    super()

    this.tsetRef = createRef()
  }

  getDom() {
    // 获取组件实例
    console.log(this.tsetRef.current)
    // 可以调用组件的实例方法
    this.tsetRef.current.test()
  }

  render() {
    return (
      <div>
        <Test ref={this.tsetRef}/>
      </div>
    )
  }
}

export default App

函数式组件是没有实例的,所以无法通过ref获取他们的实例:

但是某些时候,我们可能想要获取函数式组件中的某个DOM元素;

这个时候我们可以通过 React.forwardRef 来绑定函数组件中的某个元素, forwardRef中接收两个参数, 参数一: props, 参数二: ref,后面我们也会学习 hooks 中如何使用ref;

import { render } from '@testing-library/react';
import React, { PureComponent, createRef, forwardRef  } from 'react'
}

// 创建一个函数组件, 作为子组件测试
// 使用forwardRef将函数包裹起来
const Foo = forwardRef(function(props, ref) {
  return (
    <h2 ref={ref}>Foo</h2>
  )
})

export class App extends PureComponent {
  constructor() {
    super()

    // 提前创建一个ref对象
    this.fooRef = createRef()
  }

  getDom() {

    // 获取函数组件中元素的DOM
    console.log(this.fooRef.current)
  }

  render() {
    return (
      <div>
        <Foo ref={this.fooRef}/>
      </div>
    )
  }
}

export default App

到此这篇关于React获取DOM和获取组件实例的方式的文章就介绍到这了,更多相关React获取DOM内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React如何将组件渲染到指定DOM节点详解

    前言 众所周知React优点之一就是他的API特别简单.通过render 方法返回一个组件的基本结构,如同一个简单的函数,就可以得到一个可以复用的react组件.但是有时候还是会有些限制的,尤其是他的API中,不能控制组件所应该渲染到的DOM节点,这就让一些弹层组件很难控制.当父元素设置为overflow:hidden 的时候,问题就会出现了. 例如就像下面的这样: 我们实际期待的效果是这样的: 幸运的是,虽然不是很明显,但有一个相当优雅的方式来绕过这个问题.我们学到的第一个react函数是re

  • React组件通信之路由传参(react-router-dom)

    目录 最近在学习react,现在的工作中使用的是vue,在学习的过程中对两者进行比较,加深理解. 以下是react中的一小部分知识点,我个人觉得也是比较常用的知识点,react组件通信的其中一种方式--路由传参(react组件通信的方式有多种,如props.事件回调.context.router.redux.缓存等等).现在单页面SPA应用的比较广泛,在不刷新整个页面进行部分页面的跳转,使用路由跳转便在所难免,那么react路由除了进行页面之间的跳转,还有很大一个作用就是进行页面或者组件切换时传

  • react四种组件中DOM样式设置方式详解

    1.行内样式 想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现 行内样式需要写入一个样式对象,而这个样式对象的位置可以放在很多地方 例如:render函数里.组件原型上.外链js文件中 注意:这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 <p style={{color:'red', fontSize:'14px'}}>Hello world</p> 2.使用class React推荐我们使用行内样式,因为React觉得每一个组件都是一

  • 详解react关于事件绑定this的四种方式

    在react组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前组件,而且react还会对这种引用进行缓存,以达到cpu和内存的最大化.在使用了es6 class或者纯函数时,这种自动绑定就不复存在了,我们需要手动实现this的绑定 React事件绑定类似于DOM事件绑定,区别如下: 1.React事件的用驼峰法命名,DOM事件事件命名是小写 2.通过jsx,传递一个函数作为event handler,而不是一个字符串. 3.React事件不能通过返回false来阻止默认事件,

  • 详解React获取DOM和获取组件实例的方式

    目录 React获取DOM的方式 ref获取DOM元素 ref获取组件实例 React获取DOM的方式 ref获取DOM元素 在React的开发模式中,通常情况下不需要.也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作: 管理焦点,文本选择或媒体播放; 触发强制动画; 集成第三方 DOM 库; 我们可以通过refs获取DOM; 如何创建refs来获取对应的DOM呢?目前有三种方式: 方式一:传入字符串(这种做法已经不推荐) 在React元素上绑定一个ref字符串,

  • 详解react hooks组件间的传值方式(使用ts)

    目录 父传子 子传父 跨级组件(父传后代) 父传子 通过props传值,使用useState来控制state的状态值 父组件 Father.tsx里: 子组件 Child.tsx里: 展示效果: 子传父 跟react的方式一样,像子组件传入回调函数,通过接收子组件的返回值,再去更新父组件的state 父组件,Father.tsx里: 子组件,Child.tsx里: 展示效果: 子传父优化版,使用useCallback存放处理事件的函数 父组件,Father.tsx里: 子组件,Child.tsx

  • 一文详解Vue3中使用ref获取元素节点

    目录 静态绑定 onMounted nextTick watchEffect watch v-for中使用 动态绑定 ref设置函数 通过getCurrentInstance方法 获取vue实例 前言: 本文介绍在vue3的setup中使用composition API获取元素节点的几种方法: 静态绑定 仅仅需要申明一个ref的引用,用来保存元素,在template中,不必bind引用(:ref="domRef"),只需要声明一个同名的ref属性(ref="domRef&qu

  • 详解react应用中的DOM DIFF算法

    前言 对我们搞前端的来说,目前最流行的两大前端框架毫无疑问当属React和Vue,对于这两大框架,想必大家也是再熟悉不过了.然而,这两大框架无一例外的全部放弃使用传统的DOM技术,却采用了以JS为基础的Virtual DOM技术,也可称作虚拟DOM.所以,到底什么是Virtual DOM?两大热门框架全部使用Virtual DOM的原因又是什么?接下来让我这个搞前端的人来好好地为您讲解一下DOM DIFF算法的牛逼之处. 什么是Virtual DOM? 如字面意思所说,Virtual DOM即

  • 详解微信小程序 登录获取unionid

    详解微信小程序 登录获取unionid 首先公司开发了小程序, 公众号网页和app等, 之前都是用的openid来区分用户, 但openid只能标识用户在当前小程序或公众号里唯一, 我们希望用户可以在公司各个产品(比如公众号, 小程序, app里的微信登录)之间, 可以保持用户的唯一性, 还好微信给出了unionid. 下面分两步介绍一下 微信小程序 获取unionid的过程. 1. 首先 在微信公众平台注册小程序 , 然后在小程序上模拟登录流程. 注 : 这里只是简单登录流程, 实际中需要维护

  • 详解react组件通讯方式(多种)

    1.父组件向子组件传值 父组件向子组件传值一般采用props属性传递 父组件: import React from 'react' import Child from './Child' const dataList = [ { id: '001', value: '张三' }, { id: '002', value: '李四' } ] const Parent = props => { return ( <ul> <Child dataList={dataList}><

  • 详解React中共享组件逻辑的三种方式

    废话少说,这三种方式分别是:render props.高阶组件和自定义Hook.下面依次演示 假设有一个TimeOnPage组件专门用来记录用户在当前页面停留时间,像这样: const TimeOnPage = () => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return

  • 详解React 父组件和子组件的数据传输

    在学习 React 框架组件间数据传输知识点前,我们需要先明确几点使用原则. React的组件间通讯是单向的.数据必须是由父级传到子级或者子级传递给父级层层传递. 如果要给兄弟级的组件传递数据,那么就要先传递给公共的父级而后在传递给你要传递到的组件位置. 这种非父子关系的组件间传递数据,不推荐使用这种层层传递的方式:而是选择使用维护全局状态功能模块(Redux) 一.父组件向子组件传递数据 父组件向子组件传递数据是通过在父组件中引用子组件时,在子组件标签设置传输数据的属性:而子组件中通过 thi

  • 详解.NET 6如何实现获取当前登录用户信息

    目录 需求 目标 原理和思路 实现 创建当前用户获取接口 实现接口功能 使用功能 验证 总结 需求 在前面的文章里使用.NET 6开发TodoList应用之领域实体创建原理和思路,我们留了一个坑还没有填上,就是在数据库保存的时候,CreateUser和ModifiedUser我们当时填的都是Anonymous,完成认证的功能后,现在我们需要实现在保存数据库的时候填入当前登陆进行操作的用户名. 目标 实现当前登陆用户信息获取. 原理和思路 原理很简单,在认证时拿到的Token里,payload中是

随机推荐