1. 何时使用 Ref
通常我们可以通过props进行父子Component之间的数据传递,而使用Ref可以独立于Dataflow进行父子Component之间的interaction。
2. Ref 使用对象
Ref对于 DOM element 或 Class Component 进行使用。 注意,因为Function Component没有instances,因此不能使用。
3. 如何使用 Ref
- Create一个Ref
通过this.refExample = React.createRef()
创建一个Ref,随后将其要么attach给React element, 要么attach给HTML element:<div ref={this.refExample} />
或者<someComponent ref={this.refExample} />
。 - Access这个Ref
Attach到element之后,通过const node = this.refExample.current
的方式可以获得它所reference到的node。
如果之前attach到了HTML的element里,此时node中就是DOM element; 反之则是那个Component的一个mounted instance。 - 其他Set一个Ref的方式
除了上述直接通过createRef()
创建Ref再attach给ref这个attribute之外,还可以通过使用callback function的方式,把DOM/Component传入function存起来。