问题标签 [react-forwardref]

代码

这是否会导致每次重新渲染和实例化 React.forwardRef 时出现问题，或者内联使用它是否完全可以？

否则应该如何使用？

演示

当组件被包裹在 forwardRef 中时，您打算如何处理测试文件中的模拟组件？mockImplementation 不在方法上，而是在属性渲染上。

我看到的打字稿错误是

我明白为什么我会收到类型错误，因为 mockComponent.mockImplementation 是未定义的，但是如何正确推断出类型？

模拟显示为

我正在尝试使用 react 和 typescript 为我们的应用程序创建一个通用的文本输入组件。我希望它能够成为基于给定道具的输入元素或文本区域元素。所以它看起来有点像这样：

这段代码工作正常。但是，当尝试合并类型时，它变得有点冒险。ref 类型应该是HTMLInputElement或者HTMLTextAreaElement基于传递的typeprop。在我的脑海中，它看起来像这样：

但是我知道这不是我所需要的。因此，错误： Type 'HTMLInputElement' is missing the following properties from type 'HTMLTextAreaElement': cols, rows, textLength, wrap

总之，我希望类型对齐，以便如果typeprop 是textArea则reftype 应该是HTMLTextAreaElement，如果 type prop 是input那么 ref 类型应该是HTMLInputAreaElement

有什么建议吗？

谢谢。

父组件：

和孩子：

如果我想传递更多的道具而Child不是 justref怎么办？

我搜索了文档和教程，但一无所获；通过反复试验，我想这会奏效：

然后在Child里面，我可以得到这些道具（onClick,,, prop1）prop2。props

这就是我需要做的一切吗？通过把ref作为传递给孩子的最后一个道具？

如果我有多个按钮Child需要一个ref怎么办？

我已成功连接我的组件Details.js以管理组件本身的状态，这些是步骤：

你可以在这里看到演示

详细信息.js

应用程序.js

它有效，演示在这里。

我的问题是当我将这个元素从App.js移动到Leagues.js 时，正如您在演示中看到的那样（有两种情况）

联赛.js

71 号线

单击它时出现此错误=> TypeError 无法读取未定义的属性'cleanValue'

可能吗 ？如果是，我做错了什么，我该如何解决？

我有一个嵌套的动态表单。

目前，如果我在城市字段中输入一些内容，然后在州字段中输入两个字母，然后在下一个字段中输入两个字母，州字段不会保持填充状态。我希望它与我的州保持一致。非常简单的常见行为。示例截图：

一旦我切换到下一个字段，State 就会返回空白：

我相信基本上做到这一点的方法是在用户退出时使用 Select 元素的 onblur 选项来填充它。事实上，当它不是这里的嵌套组件时，我曾经让它工作。不幸的是，当我重构它以使其嵌套时，我破坏了它。我认为我的 ref 坏了，我不知道如何使用 forwardref 来修复它，但我可能会离开这里。裁判有点让我头晕目眩。

希望那里有善良的灵魂可以帮助我了解如何解决它。我现在也收到警告，列表中的每个孩子都应该有一个唯一的“关键”道具，我不确定为什么。

父组件 TenantForm.js

子组件 ArrayOfSubFormComponentsForApplicants.js

子组件 SubFormComponentForApplicants.js

我在父组件中创建了“textRef”，并使用 createRef() 传递给子组件。我正在尝试将子组件中的输入动态地集中在道具更改上。

当我在 localhost (chrome) 上测试但在 web 视图上测试时，它确实有效。

关于这个问题有什么建议吗？谢谢 ！！

父组件

子组件

版本

我有一个属于 UI 库的组件，我们称之为 Input 组件。当使用这个库调用 Input 时，我可以调用的类型很多。例如

现在我想为这个 Input 组件写一个包装器，所以我这样写

在index.tsx中

然后我可以像这样使用它们：

但是通过这样做，我不能使用原始 UI 库的refinputRef.current.focus()方法（类似）。这就是为什么我像这样使用forwardRef和ForwardRefRenderFunction

通过更改为这个，我可以将 ref 传递给原始 UI 库并可以使用其原始方法。但是，我现在的问题是当我更改为forwardRef和ForwardRefRenderFunction 时，我不能再调用TextArea和Search

这是错误：

任何人都可以给我一些指导吗？谢谢

我正在编写一个 React 组件，它可以将 ref 转发给它的孩子

我发现对于函数组件的返回类型，我可以使用ForwardRefExoticComponent和ForwardRefRenderFunction。但我不确定它们之间有什么区别。

到目前为止，当使用ForwardRefExoticComponent 时，我可以扩展它而ForwardRefRenderFunction不能？我在这里发布了一个与我的案例相关的问题：How to export forwardRef with ForwardRefRenderFunction

如果有人知道它们之间的区别以及它们的作用，请帮助我。因为 React 团队似乎没有关于它们的文档（但它们在 react 包内）

我想知道如何使用 Reactrefs导航到特定组件

应用标头

应用菜单

我知道我应该在父组件上声明 ref ，但我一直坚持如何将引用传递给菜单应用程序并在它和组件之间建立链接。

实际上，我不会使用像react-scroll这样的包