问题标签 [react-forwardref]

我第一次使用useRefand的经验forwardRef。我已经得到了一些关于潜在解决方案的提示，但我还有一段路要走，但是该组件很小而且相当简单。

我想要做的是useRef用来传递一个handleOnKeyDown函数的结果，它基本上是在寻找一个keyCode 13（键盘上的“Enter”），然后findGoodsBtnRef通过将它向下传递到CcceAttribute组件中来“单击”ref={findGoodsBtn}

我知道我目前所拥有的东西是不正确的（因为它不起作用）并且我的编辑抱怨我ForwardRef在第一行使用了，任何人都可以建议我在尝试实施这个解决方案时可能会出错的地方吗？TIA

非常简单的问题，但目前我收到控制台错误消息“无法为函数组件提供参考。尝试访问此参考将失败。您是要使用 React.forwardRef() 吗？”

任何时候我尝试将 forwardRef 添加到我的代码中（以我尝试过的任何方式），我的代码都拒绝编译，任何人都可以建议使用我的代码正确实现 forwardRef 吗？蒂亚！

第一次尝试使用useRef所以原谅任何非常明显的错误。我有两个组件（父组件和子组件）-在父组件中，我基本上试图useRef传递handleOnKeyDown给我的子组件（findGoodsBtn）所在的位置，并且基本上在用户输入“Enter”时复制对该按钮的单击。

父组件是新的，我认为一些语法可能有点偏离，子组件已经工作了，所以可能只需要一个小的调整来接受ref- 任何人都可以告诉我哪里可能出错了吗？

家长：

孩子：

我应该在控制台中添加我收到错误消息：“警告：无法为函数组件提供参考。访问此参考的尝试将失败。您的意思是使用 React.forwardRef() 吗？” - 之前检查过各种答案，但认为这可能取决于子组件？

对于普通的 React 组件，我可以看到组件 props 的正确自动完成，如下所示：

但是我尝试创建一个React.forwardRef像下面这样的组件，它不起作用，知道吗？

我正在使用 MUI 数据表（ V.3.7.8 ），并且出现此错误“ index.js:1 Warning: Failed prop type: The prop buttonRefof ForwardRef(ButtonBase)is deprecated. Use refinstead. ”。

我可以看到，当我在 MUIDataTable 选项 ( search:false ) 中关闭搜索时，错误消失了，我注意到这与工具提示有关。

这个问题已经解决了吗？或者其他人也有同样的问题？

提前致谢！

整个代码段：

错误表明此部分中未定义用户名部分。无法读取未定义的属性（读取“用户名”）

调用 Message 的父级是

在 ReactJs 项目中，我尝试使用com.wiris.js.JsPluginViewer.parseElement(ref, true, function () {});函数进行解析。

根据文档，该功能将应用于 DOM 上的特定元素。在纯javascript的示例中，他们首先设置dom元素的innerHTML，然后应用该函数。

所以我认为它会在 React 中使用 refs 来处理。（不确定它是否是最好的方法）

我有一个数组，其中包含一些要呈现为 html 的字符串。我将所有参考作为一个数组，useRef([])然后使用设置每个元素的参考refs.current[index]

根据类型，我直接使用dangerouslySetInnerHTML或使用包装器组件渲染字符串，以使用我将使用该特殊功能的子组件进行渲染。

但是在 WirisWrapper 中应用该函数之前，我无法达到 ref 的 innerHTML 属性。我试过ref.innerHTML 了ref.current.innerHTML

解析器作为父级

WirisWrapper 作为孩子

我在 Stack Overflow 上看到了很多关于如何在 React 中键入正向引用的答案，虽然其中一些答案适用于我的应用程序的某些部分，但在这种情况下，它们都不起作用。

我正在使用 React Native 并返回一个由 forwardRef 包装的 View 组件。我已经设法输入了 ref 参数，但我似乎无法创建一个能让 TS 编译器满意的 props 接口。我得到的错误令我感到奇怪的是，键入 props 接口会导致在将 ref 传递给组件时引发错误，但正如我所说，ref 已经键入。这是我必须要做的：

ref={ref}当我将 props 接口从 type of 更改为上述类型时，TS 编译器会在此处突出显示一个错误any：

如何在不使用任何内容的情况下键入此内容？

我正在构建一个反应组件库。

此文本字段通过传递一个refwith 来工作forwardRef：

但是，当我尝试使用 a 进行相同操作时select：

然后我在自己的应用程序中使用react-hook-form ，如下所示：

选择的选项不会保存，我可以看到当我提交表单时，即使选择了一个选项，它也会尝试提交“--选择一个选项--”。

我正在尝试将数据发送到我将表单字段与该数据绑定的子函数组件。它在第一次调用时工作正常，但是当我第二次调用时，数据永远不会更新状态，它总是显示第一个。

这是使用子组件 ref 的父组件

这是子组件