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>



发布了270 篇原创文章 · 获赞 102 · 访问量 50万+

猜你喜欢

转载自blog.csdn.net/hahahhahahahha123456/article/details/104207034