原生方法
也就是通过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>