什么是Reactjs中的innerRef？

Question

我知道什么是this official doc中的引用。我所面临的挑战是我没有找到任何关于innerRef的官方文档。它还在使用吗？

我从here那里了解到了innerRef：

<ReferenceBox innerRef={ref}>
  <a
    href="https://github.com/FezVrasta/react-popper"
    target="_blank"
  >
    react-popper
  </a>
</ReferenceBox>

如果有人能告诉我什么是innerRef，那就太好了。谢谢!

Answer 1

innerRef不是标准的React属性。它是React Popper模块的一个属性，并且是documented here。

它是一个

可用于获取弹出器引用的

函数

Answer 2

innerRef只是作者选择使用的自定义属性。它在React中没有特殊意义。看一下源代码，似乎他们想要一种与React ref prop区分的方法，不确定为什么。

Answer 3

Clarification:

innerRef只是react-popper中自定义组件(例如箭头)的另一个属性。

在我们想要访问子组件创建的dom元素的情况下，这种模式变得越来越常见。也可以将其命名为childRef或任何其他有意义的名称(注意:如果您使用的库使用特定的名称引用它，例如innerRef，则ref或childRef将不起作用)。

为什么选择innerRef?

它的作用是指向父组件中的一个函数。该函数将domNode/React实例作为参数，并将其存储为父组件的实例属性，以便父组件可以使用存储的dom访问子节点的属性( offsetHeight、scrollTop、子节点、dom上的事件侦听器等)。

你的案例：

查看Arrow组件，我们可以看到innerRef实际上是Popper类的setArrowNode函数，它将箭头节点作为参数，并将其设置为Popper上的实例属性。Arrow组件似乎是一种样式组件，它将React的ref属性引用为innerRef (新版本的样式组件使用ref属性)。这意味着，如果您将arrowProps.ref传递给Arrow的innerRef prop以外的任何其他对象，react-popper将不会按预期工作。