问题标签 [react-forwardref]

我对反应比较陌生，似乎无法弄清楚，我已经研究了一段时间，似乎没有任何效果。

我有一个使用 createRef 的父组件

然后将其传递给孩子&访问如下

但在 getState chartRef current 始终为 null

这是子组件

任何帮助表示赞赏

我需要绑定Title和Body组件到 Wrapper 组件。

之前，我这样写我的组件：

使用后forwardRef，我修改WrapperInterface了，但是typescript总是提示我缺少Title和Body属性，这是WrapperInterface代码：

不直接导出，因为Body和Title组件太常见了。

我怎么解决这个问题？

这是我的反应挂钩 - 控制器

问题是 ref 不起作用。它需要是 inputRef - 由 react-hook-form 示例确定。如果我使用 inputRef，我会收到打字稿错误：

“DetailedHTMLProps<InputHTMLAttributes, HTMLInputElement>”类型上不存在属性“inputRef”

如果我尝试将该属性添加到 index.d.ts 文件中，它会破坏我所有其他声明的模块..

我有以下组件决定是否应根据用户权限呈现组件：

我需要做的是将在使用组件时ref将在内部的子组件传递给子组件Can。

我怎样才能做到这一点？

试图将 ref 传递给我的搜索组件但没有任何成功。这是我的组件：

创建参考：

组件：

我收到此错误：

输入'{占位符：字符串；onSearch: () => 无效；参考：可变参考对象；}' 不可分配给类型 'IntrinsicAttributes & SearchInputProps & { children?: ReactNode; }'。类型'IntrinsicAttributes & SearchInputProps & { children?: ReactNode; 上不存在属性'ref' }

我想要实现的是在单击父文件中存在的图标时关注子组件中存在的 TextInput 。我曾尝试使用 refs 和 forward refs 但这意味着我必须将组件包装在我试图避免的 forwardref 中。

我的子文件如下所示：

下面是我的父文件，其中有一个图标，点击它我尝试让这个文本字段成为焦点。

);

我现在正在做一个 React 项目（顺便说一句，我是一个 React 新手......）。

堆：

• “反应”：“^17.0.1”
• “@material-ui/core”：“^4.11.2”
• “反应路由器 dom”：“^5.2.0”
• “反应测试渲染器”：“^17.0.2”

我有一个选项卡布局（使用 Material-UI 中的选项卡和选项卡组件），如下所示：

一切正常，控制台是空的，UX 和 UI 看起来像预期的那样，但是......

我尝试使用 react-test-renderer 添加快照测试，如下所示：

不幸的是，我收到了这些错误：

我通过网络阅读了数百页，但我不知道如何解决这个问题......

我阅读了 React 文档、Material-UI 文档、Stackoverflow 上的线程......

我尝试使用 React.forwardRef() 来“包装” Tabs 组件并在道具中添加 ref={ref} 但没有成功（Tab 和 Link 也是如此）。

对于错误“上述错误发生在 <ForwardRef(Modal)> 组件中”我猜它是由于 Menu 和 MenuItem 使用...

好的，这是一个参考问题，但来自谁？Material-UI，react-renderer-test，我的代码？我有点迷路了，我真的很感谢你的帮助；）

非常感谢！

我正在使用react-dropzone，我想在页面加载后立即自动打开文件上传对话框。

我编写了以下代码，但我无法理解如何使其自动打开，这将是我做错了，ref因为我可以访问它的属性。

你能帮我个忙吗？

链接：codesandbox

I'm working with React and Next.js in Typescript and I'm trying to make this wrapper component that will bundle together a Next.js <Link /> component and a <a /> tag:

Problem is that I want to support forwarding refs, but as soon as I wrap my function in forwardRef typescript fails to parse my JSX. I get this error message on the line with <Link...:

Seems like it is maybe registering the <> around Link as Typescript syntax.

I used this example to set up my forwardRef as typescript code:

Taken from here. I was assuming that the example should be good, but when I copy paste that directly into my code, I also get an error on the line where the JSX starts (i.e. <button>...):

Button is just a good old HTML element, so it's definitely not picking up the JSX here either.

I tried rewriting the arrow function with a explicit return statement. From:

To:

Did not work either, same error.

What am I missing here?

我正在react-hook-form从版本 6.x 升级到 7.x，并且说明说Component as用render道具替换 。

这对我的大多数样式组件都很好，但对我来说，DatePicker我需要传入一个inputRef它才能工作。

旧代码（在react-hook-formv6下运行良好）如下

所以用道具替换as看起来render像

但这不起作用，我得到了错误

问题似乎是我的使用，forwardRef并且尽我所能，我无法弄清楚在哪里或如何解决它。