React Ref


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存起来。

Author: Luchen
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source Luchen !
  TOC