React获取真实dom的几种方式?

原生方法

也就是通过document.getElement获取,可以自己添加className或者id方便获取dom,不多赘述

ref方式

ref原生

当你使用ref直接是在原生标签上使用的时候

// 1. ref
let divNode = this.refs.div;
// 2. ref 方法
let spanNode = this.span
// 3. creatRef
let pNode = React.createRef().current

...
<div ref='div'>div</div>
<span ref={(span) => this.span = span}>div</span>
<p ref={this.p}>p</p>

ref React组件

ref作用于react组件只能获取到该vdom,不能获取真实节点,只能通过ReactDom获取

注意: ref 作用于函数式组件不生效, 可以使用React.forwardRef包裹

let navNode = ReactDom.findDomNode(this.refs.nav)
...
<Nav ref='nav'>导航</Nav>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 1,052评论 0 1
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,860评论 1 18
  • 以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性...
    科研者阅读 8,292评论 2 21
  • ReactDOM ReactDOM 中的 API 非常少,只有 findDOMNode、unmountCompon...
    HROKKO阅读 1,239评论 0 1
  • 早上在霍营站排队等地铁的时候,旁边来了位穿着白色T恤和白色小短裙的姑娘。就暂且叫她白姑娘吧。但令人奇怪的是,她在原...
    老祝读书阅读 278评论 0 0