reactjs - React 开发工具中组件的 forwardRef 是什么意思，我该如何使用它？

Question

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

标签： reactjsreact-forwardref

Answer 1

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

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

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

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

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

此提示和技巧页面上也对此进行了说明：

引用 DOM 节点

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