什么是React中的node => {this.node = node}

Question

我是React的新手，我想通过外部点击关闭下拉列表

我最终得到

ref={(node) => {this.node = node;}}

有人可以解释这一行代码是什么意思？

Answer 1

这是ref函数，一种分配ref的底层方法。装入组件或元素后，它将为this.node属性分配一个引用。

推荐的方法是使用：

this.nodeRef = React.createRef();

...

<Comp ref={this.nodeRef}/>

安装组件后，ref可以作为this.nodeRef.current使用。使用可以通过引用传递的this.nodeRef对象是一种避免this.node可能出现的常见问题的方法。

Answer 2

以上模式是在React中为dom元素分配引用的一种方式。它称为引用的回调模式。在渲染过程中，react调用的回调函数将元素的引用作为道具传递给该函数，然后使用该函数并将其分配给类变量

更多信息，react the docs

Answer 3

ref={(node) => {this.node = node;}}

在这里，当您使用上述方法定义ref时，定义的函数将与组件/元素的实例一起调用。即node是定义ref属性的元素。然后将该实例保存在this.node

中