如何在React中使用ref回调？

Question

ref属性使我们能够捕获不受控制的组件的值。

class MyComponent extends Component {
  render() {
     <input type="text" ref={el => this.setState({ myEl: el })}/>
  }
}

这是如何工作的？据推测，input实际上是一个React组件，它具有一个属性（＆＃34; prop＆＃34;）ref，它接受​​每次{{1}时使用字段的包装器组件调用的回调。被称为？

Answer 1

来自the React documentation：

  

将参考添加到DOM元素

     

React支持可以附加到任何组件的特殊属性。 ref属性采用回调函数，并且在安装或卸载组件后立即执行回调。

     

[...]

     

当组件安装时，React将使用DOM元素调用ref回调，并在卸载时使用null调用它。

因此，在将组件安装到DOM之后调用ref回调，并将底层DOM元素作为唯一参数。在使用参数null卸载后也会调用它。