Reactjs中的innerRef是什么？

Question

我知道this official doc中的Ref是什么。我面临的挑战是我没有找到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。

是一个

  

可用于获取Popper参考的功能

Answer 2

innerRef只是作者选择使用的自定义属性。在React中它没有特殊含义。从源头上看，他们似乎想要一种区别于React ref道具的方法，不确定为什么。

Answer 3

说明：

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

在我们要访问由子组件创建的dom元素的情况下，这种模式变得越来越普遍。也可以将其命名为childRef或任何其他有意义的名称（警告：ref或childRef如果您使用的库使用特定名称（例如{ {1}}。

为什么选择innerRef？

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

您的情况：

看一下innerRef组件，我们可以看到Arrow实际上是innerRef类的setArrowNode函数，它将箭头节点作为参数并将其设置为Popper上的实例属性。 Popper组件似乎是一种样式化的组件，它把React的Arrow道具称为ref（新版本的样式化组件使用了innerRef属性）。这意味着，如果您将ref传递给arrowProps.ref的{​​{1}}道具以外的其他任何对象，则react-popper将无法正常工作。