Reactjs中的innerRef是什么？

我知道什么是Ref。我面临的挑战是，我没有找到innerRef的任何官方文档。它还在使用吗

关于

innerRef

我从以下方面了解到：

---

如果有人能告诉我什么是innerRef，那就足够了。谢谢

innerRef

只是作者选择使用的自定义属性。它在React中没有特殊意义。从源代码看，似乎他们想要一种方法来区分React

ref

prop，但不知道为什么

innerRef

不是标准的React属性。它是React Popper模块的一个属性，是

这是一个

可用于获取波普尔参考的函数

---

澄清：

---

innerRef

只是react popper中自定义组件（例如箭头）上的另一个属性

在我们希望访问由子组件创建的dom元素的情况下，这种模式变得有点常见。它也可以被命名为

childRef

或任何其他有意义的名称（注意：

ref

或

childRef

，如果您正在使用的库使用一个特定的名称（如

innerRef

）引用它，则该名称无效）

为什么选择innerRef？

它所做的是，它指向父组件中的函数。该函数将domNode/React实例作为参数，并将其存储为父组件的实例属性，以便父组件可以使用存储的dom访问子节点的属性（宽度、偏移、滚动顶部、子节点、dom上的事件侦听器等）

您的案例：

---

查看

Arrow

组件，我们可以看到

innerRef

实际上是

Popper

类的

setArrowNode

函数，它将Arrow节点作为参数，并将其设置为Popper上的实例属性。而

箭头

组件似乎是一种样式化组件，它引用React as

innerRef

的

ref

属性（样式化组件的新版本使用

ref

属性）。这意味着，如果您将

arrowProps.ref

传递给

Arrow

的

innerRef

道具以外的任何其他道具，则react popper将无法按预期工作。

innerRef

与其他道具一样，只是一个自定义道具名称，

ReferenceBox

的作者在组件中的一个元素上使用as

ref

，以便

ReferenceBox

的用户可以获得对它的引用。

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