React 开发工具中组件的forwardRef 是什么意思以及如何使用它？

Question

当我在 React 开发工具中检查组件结构时，我可以看到有一个forwardRef标记。我很困惑，因为源代码中没有使用它的迹象。它是怎么存在的以及我该如何使用它？

Answer 1

这些forwardRef调用不在您自己的代码中，而是在您正在使用的包中。

styled.button似乎是来自styled-components. 该包用于将您在样式按钮组件上设置的forwardRef任何内容转发到底层组件。你可以在他们的源代码中看到它：refbutton

WrappedStyledComponent = ((React.forwardRef(forwardRef): any): IStyledComponent);

开始使用 styled-components v4的用法forwardRef- 请参阅本迁移指南中的步骤 #2 ：

确保您的应用程序使用的是 React >= 16.3；React.forwardRef如果您想尝试使用 polyfill 来支持较旧的 React 版本，我们内部将使用新的API 和新的上下文 API

此提示和技巧页面上也对此进行了解释：

对 DOM 节点的引用

styled-components 使用新的 React 16.3 API forwardRef。因此，像在任何其他组件上一样设置 refs，它们将自动解析为底层 DOM 元素或包装的组件类实例。