问题标签 [react-forwardref]

因此，我们从 material.ui 中实现了 Modal，并尝试根据作为 props 传入的内容在 modal 中安装不同的组件。执行此操作后，我们收到错误消息“无法为函数组件提供参考。尝试访问此参考将失败。您的意思是使用 React.forwardRef() 吗？”。

我们试图了解如何使用 React.forwardRef() - 例如，我们已经阅读了这个线程（我如何在 React 中使用 forwardRef()？） - 但无法真正理解如何在我们的具体代码。

非常感谢我们如何实现 React.forwardRef() 以消除错误的帮助。

这是我们的代码（模态）

这是我们安装 Modal 的地方

这是 EditTask 组件

我正在使用 ant 设计图表在网页上显示数据。我想在此图上使用toDataURL函数来提供导出功能。但是我认为我需要在我的父组件中使用ref，然后将ref提供给报告生成组件。除了使用forwardRef将 ref 从父级传递给子级然后访问它之外，还有其他方法吗？

我只是想了解如何使用这个属性。

在我的主文件中，我添加了这些：

退货中：

这是 Audio.js

这是错误，

es-lint 错误 'ref' 未定义

在将 MUI 与单独的组件MenuItem结合并将其呈现时，我遇到了一个问题。Select

这是代码框

基本上，我有这样的事情：

这是自定义项目：

起初，我在没有任何引用的情况下完成了此操作，但这在控制台 ( Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?) 中给了我一个错误，所以在谷歌搜索了一段时间后，我发现我必须通过这个引用。我也传递了...rest道具，因为我知道MenuItem需要它们。

预期行为：当我单击 时MenuItem，它会在Select组件中被选中。

实际行为：没有任何反应。

问题是，我制作了CustomMenuItem它以使其可重复使用。但在此之前，我有一个简单的函数，比如：renderItem我在 inSelect.renderValue和 in 中都使用userIds.map过它，它的代码与CustomMenuItem- 它返回相同的 JSX 树。当时它起作用了，但由于某种原因，它现在不起作用。所以，如果我会这样做：

它只是工作:(

我在这里错过了什么吗？

我正在尝试在反应中完成一个表单，该表单具有上传图像的子组件（进行预览并做得更漂亮）但问题是我无法访问孩子的 useState 我需要的图像在哪里发送到后端。

这是子组件的代码，在 useState 中我需要通过父组件访问图像：

在该上传表单组件中，我需要访问该图像以将其与 axios 一起发送到后端：

但是我不知道如何通过父母获得这些图像，如果有人可以帮助我将非常感激，谢谢！

我目前正在我的网站上开发移动签名功能。我要处理三个组件：Form.js（父级，使用 Formik 作为表单）、Admin.js（Form 的子级）和 Signature.js（Admin 的子级）。

当您以纵向模式到达此页面（表单的管理部分）时，它会呈现一条消息以将您的手机横向切换为签名。当您转为横向时，会弹出一个按钮：“单击此处签名”。当您单击它时，会弹出一个带有签名画布 (react-signature-canvas) 的全屏 Material-ui 对话框。您签名，然后单击“保存并关闭”以关闭全屏对话框，然后单击“保存签名”以将签名保存到您的个人资料中。

使用断点，我发现当您在对话框中单击“保存并关闭”以关闭它时，状态正在正确地与签名一起保存。但是，当您在表单的“管理”部分单击“保存签名”时，状态已重置为其初始状态为 null。

我相信解决方案是使用 forwardRef 钩子，但问题是我看到的大多数示例都是将 ref 从一个组件转发到另一个组件，我认为我需要让它按照我的组件的结构方式通过一个附加组件（从签名 --> 到管理员 --> 到表单）。我需要将 SignatureCanvas (react-signature-canvas) 的引用从 Signature.js 获取到 Form.js。以下是每个文件的相关信息：

签名.js

管理员.js

表单.js

我研究并认为也许我需要使用 useCallback 钩子而不是转发 ref 或根本使用 refs 但不确定如果这是正确的解决方案如何实现。我还尝试在表单组件中设置状态并将其传递给管理员，然后传递给签名，但没有任何运气。任何帮助将不胜感激！

我有这个界面：

然后是这个功能组件：

CustomComponent我的目标是从另一个组件访问它。我尝试ref: React.createRef<any>在界面内添加但它没有点击。从我的研究来看，我似乎需要使用forwardRef但大多数在线示例似乎都不起作用。CustomComponent有什么想法可以像这样从外部，从不同的组件引用我的吗？

areaRef抛出一个我应该使用的错误forwardRef。

我有通过反应编写的应用程序：

主要应用程序是：

儿童组件是：

我在子组件中使用 useImperativeHandle 并尝试在父组件中使用 'childRef.current.SortVote()' 来调用子组件函数。但是浏览器有错误：

完整代码在：https ://stackblitz.com/edit/react-vy7df9

在 useImpertiveHandle 钩子中，SortVote 和 sortDate 已经定义了函数，但是为什么这里仍然报错 SortVote is not function？

嗨，我试图将 forwardRef 添加到子组件，但在添加 forwardRef 时得到以下信息： TypeError: Component is not a function

组件定义如下：

这是堆栈跟踪：

有什么我必须更改才能向该组件添加 forwardRef 吗？