什么是Reactjs中的innerRef？

Question

我知道这篇官方文档中的 Ref是什么.我遇到的挑战是我没有找到任何关于innerRef的官方文档.它还在使用吗？

我innerRef从这里了解到:

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

如果有人能指出我是什么是innerRef,那就足够了.谢谢!

Answer 1

澄清：

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

当我们想要访问子组件创建的 dom 元素时，这种模式变得越来越常见。它也可以被命名childRef或任何其他有意义的名称（注意：如果您使用的库使用特定名称（例如 ）引用它，ref则该名称将不起作用）。childRefinnerRef

为什么是内部引用？

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

您的案例：

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

Answer 2

innerRef不是标准的React属性.它是React Popper模块的一个属性,在此处记录.

它是一个

可用于获取popper引用的函数

Answer 3

innerRef只是作者选择使用的自定义属性。它在 React 中没有特殊含义。查看源代码，他们似乎想要一种与 React refprop 区分开来的方法，但不知道为什么。