箭头函数中的set ref和set ref direct variable之间有什么不同

Question

我知道在React中做什么refs。通常我会看到这种方法来设置ref：

<Example ref={ el => {this.example = el}} />

但有时候我会看到这种方法：

<Example ref={this.example} />

有什么区别？

Answer 1

<Example ref={ el => {this.example = el}} />

在此方法中，它充当callBack函数。并且特定的DOM元素将作为参数返回给'this.example'。因此，您可以根据需要对DOM元素进行操作

<Example ref={this.example} />。这与上面的行为类似，而这会将ref附加到DOM元素。如果要将ref附加到子元素并在父元素

中访问它，则经常使用此方法

请参阅此链接以获取更多信息：https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-class-component

Answer 2

这两个都是功能。在documentation中，您看到this.props.inputRef正在使用，所有这些意味着父组件可以通过回调函数获得对该组件的引用。

假设您没有使用字符串引用（不推荐使用），this.example将成为与el => {this.example = el}相同的成员函数。

Answer 3

据我所知，有两种方法可以为元素提供ref： <Example ref={el=>{this.example=el}}/> 要么 <Example ref="example" />

请向我们提供一个关于您提到的最后一种方法的工作示例