5

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

在此处输入图像描述

4

1 回答 1

3

这些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 元素或包装的组件类实例。

于 2021-04-15T17:02:56.227 回答