问题标签 [react-forwardref]

根据React-Bootstrap Overlays 文档，如果目标是内联的，则覆盖的目标应该是the element the overlay is positioned in relation to可以很好地工作的。例如下面的示例 1。

但是，如果引用的 dom 项目包含在另一个组件中，如示例 2所示，则引用设置不正确，并且弹出框没有正确定位。

起初我没有转发 ref，并认为这是我的问题，但即使根据React.forwardRef 文档修复了该问题， ref 仍然无法正常工作。

可能的解决方案：我可以将目标倾斜而不是另一个组件，但这消除了能够在 React 中使用组件的目的。

我可能在这个设置的某个地方错过了一小步，我只是不知道在哪里。

当我写这个并寻找重复项时，我确实找到了一个替代的工作解决方案。正如Simon Arsenault 的回答中所见，通过将组件包装在 dom 元素中，我可以使用该 dom 元素作为示例 3中所示的 ref

我仍然想知道为什么 forwardRef 似乎不起作用。

示例 1：工作

示例 2：不工作

示例 3：工作

PS：是的，我知道这不是一个完全有效的示例，因为我没有使用 Overlay 的show属性，但它工作正常，为简洁起见，在此代码片段中省略了。

我有一个固定位置的导航栏，当应用程序中的某些菜单展开时，我想将其设为静态。
问题是两个组件在应用程序层次结构中彼此相距很远。

我对这一点感到困惑React.forwardRef。正如其文档中所解释的，我知道它的主要用途是让父组件访问子组件的DOM元素。但我已经可以做到这一点，甚至不必使用它。

这是一个代码示例，您可以将其插入 CodeSandbox 并查看它是否有效：

或者这里是这个例子的嵌入。老实说，我对此有点陌生，我不知道嵌入是如何工作的，也不知道有人摆弄嵌入是否会改变我原来的沙箱，所以我犹豫不决。但在这里。 示例转发参考

在示例中，父App()组件成功地将 ref 传递给子组件，子组件将其附加到其呈现的div。渲染后，它会向父级调用回调函数。然后父级执行控制台日志，证明其转发的 ref 现在拥有子级的 div。而这一切都是在没有React.forwardRef.

那么有什么用React.forwardRef呢？

我的代码：

如上面的代码所示，我使用 useRef 钩子创建了一个引用并将其附加到我的 ParentComponent。现在我通过目标道具传递给 ChildComponent 并使用它在孩子内部进行一些 dom 操作。

问题：对于组件的第一次渲染， 我将ParentReference设为null。（如果我在更改 ParentReference 时强制重新渲染，它将更新并重新渲染整个组件，那么它将具有价值。）

如何在我的子组件中获取 ParentReference 以进行初始渲染？

我创建了一个沙箱：https ://codesandbox.io/s/happy-rgb-vks06?file=/src/App.js

我正在尝试将道具传递给 SlotSettings 组件，但出现此错误：

警告：不能给函数组件提供参考。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？

我试图阅读 Bootstrap 文档和 React 文档，但我不明白这应该如何工作。这是我正在使用的代码：

我正在尝试使用我编写的这个组件：

...一次在Textfield类型内select，另一次在Menu组件内。但是，在浏览器中访问它时出现以下错误：

关于如何解决这个问题的任何想法？

更新：

这是我如何调用这个组件：

更新 2

这是错误堆栈：

尽管我已经应用了几篇文章和 materail-ui 网站示例中提到的 forwardRef，但我仍然在控制台中收到警告。我真的不明白为什么。

我正在尝试创建一个包含项目列表的抽屉，这些项目是嵌入到 Material-UI 链接组件中的反应路由器链接。我嵌入它们是为了从我创建的全局 MUI 主题中受益

PS：这是一个打字稿代码。参考强类型是地狱;-)

这是重现问题的 CODESANBOX。确保扩展足够的代码框浏览器页面以显示抽屉

链接组件

抽屉组件

我称之为抽屉的主页

我知道 refs 用于直接访问 DOM 元素而不改变状态。我读到不可能给函数组件提供引用，因为它们没有状态。

Refs 不能附加到函数组件上。虽然，我们可以定义 refs 并将它们附加到 DOM 元素或类组件。底线是——函数组件没有实例，所以你不能引用它们。

取自：https ://blog.logrocket.com/cleaning-up-the-dom-with-forwardref-in-react/

我还是不明白。

我正在使用Tooltip来自 Ant Design ( https://ant.design/components/tooltip/ ) 的组件、Button组件和自定义CircleButton组件。

给定以下 JSX：

还有我的 CircleButton 组件。像这样使用，它会产生警告。

警告：不能给函数组件提供参考。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？

请注意，尽管有警告，但一切都按预期工作。

如果我按如下方式编辑它，它会正常工作，为什么？

div组件有状态吗？我不明白。是在forwardRef做一些魔术并为 div 元素创建一个状态吗？

那为什么如果我将它传递ref给Button组件它仍然会发出警告？

如果我antd Button小时候直接通过，它可以工作。但这是因为我认为 antd 按钮有一个状态，因此它可以有 refs。

我只是尝试将 forwardRef 与 withRouter(mycomponent) 一起使用，如下所示：

如果我将组件包装在 withRouter HOC 中，则 ref 将不起作用，它始终为空。那么如何将 forwardRef 与包装在 withRouter 中的组件一起使用？

我是 React 和处理 React 的警告和错误的新手。所以，我希望了解我应该如何创建 refs而不是允许findDOMNode发生。

我正在App Bar中创建一个Popover。但是 Popover 引用会引发错误，并且在处理它时会消失，因为我的 ReactDOM 没有始终如一地处理它。问题是：我不能很好地处理。ref={ref}

为了了解更多信息，我在StrictMode中运行 React 。
React 需要一个forwardRef()以便它知道 Popover 相对于视图的位置，因此不会落在视图之外。但我不知道该怎么做。
如何使 createRef 和 forwardRef 工作？