问题标签 [react-forwardref]

我和 一起工作<canvas>，这就是我需要它的原因，我知道它通常有气味，但不是这种情况。

我有组件树：

只有这个被分成组件。

如何<D>在组件中获取组件的引用<A>？

就像是：

我用过forwardRef，但它只工作一个级别

我想用 ref 实现在此组件外部单击按钮时打开 react-datepicker 日历。如果它在条件渲染之外，它工作正常。如果我输入条件语句，我会得到 TypeError：this.calendarRef.current 为 null。它是类组件，并且 calendarRef 在构造函数中定义。

谢谢你的任何建议。

我正在尝试使用 react forwardRef 在一堆子组件中调用一个函数。这是代码。

问题是 createRef 似乎只适用于循环外的组件。你知道这里有什么问题吗？或者不可能做到这一点？

当我在 React 开发工具中检查组件结构时，我可以看到有一个forwardRef标记。我很困惑，因为在源代码中没有使用它的迹象。它是怎么存在的，我该如何使用它？

主要目标：我有两个 TextInput，我想模拟返回单击第一个 textInput 以将焦点设置到下一个 textInput。

让我们从设置开始（使用打字稿）

我有一个带有一些颜色设置的主题 TextInput，如下所示。如果提供，我设置/使用 forwardRef 来传递 ref。在我能读到的内容中，这似乎是正确的方法。但也许这是错误的。

现在在我的屏幕上，我正在使用这个对象，并且在完成第一次输入时，我想将焦点放在这个对象上。代码看起来像这样..

知道如何在功能组件+自定义组件+打字稿中正确实现这一点。

如果您想查看完整的设置，可以在此处获得样品小吃。 https://snack.expo.io/@varesh.tapadia/useref-and-useforwardref

需要：想要将props&传递forwardRef给子组件

MVCE：这就是我在stackblitz上尝试时得到的结果- 孩子内部的引用为空 - 但没有错误（如下所示）......

但是，我在代码库中遇到的错误

希望有一个答案/链接可以清楚地解释这一点并帮助解决这个问题 - 我看到的示例仅通过道具或仅通过 forwardRef；在 stackblitz 上，它也有效；

我使用的技术是 react、typescript 和 styled-components。我正在尝试创建选择组件以便在 React Hook Form 中使用它。起初，看起来一切都是正确的，但我从打字稿中得到一个错误说：

没有重载匹配此调用。重载 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<SelectHTMLAttributes, HTMLSelectElement>, "form" | ... 262 更多 ... | "onTransitionEndCapture"> & { ...; } & ISelectProps, " form" | ... 264 更多 ... | "options"> & Partial<...>, "form" | ... 264 更多 ... | "options"> & { ...; } & { ...; }): ReactElement<...>'，给出了以下错误。类型“ForwardedRef”不可分配给类型“RefObject | (RefObject & ((instance: HTMLSelectElement | null) => void)) | (((实例：HTMLSelectElement | null) => void) & RefObject<...>) | （（（（实例：HTMLSelectElement | null）=> void）&（（（实例：HTMLSelectElement | null）=> void））| 空 | 不明确的'。类型“MutableRefObject”不可分配给类型“RefObject | (RefObject & ((instance: HTMLSelectElement | null) => void)) | (((实例：HTMLSelectElement | null) => void) & RefObject<...>) | （（（（实例：HTMLSelectElement | null）=> void）&（（（实例：HTMLSelectElement | null）=> void））| 空 | 不明确的'。类型 'MutableRefObject' 不可分配给类型 '((instance: HTMLSelectElement | null) => void) & RefObject'。类型“MutableRefObject”不可分配给类型“（实例：HTMLSelectElement | null）=> void”。类型“MutableRefObject”不匹配签名“（实例：HTMLSelectElement | null）：void”。HTML选择元素 | 空）=> 无效））| (((实例：HTMLSelectElement | null) => void) & RefObject<...>) | （（（（实例：HTMLSelectElement | null）=> void）&（（（实例：HTMLSelectElement | null）=> void））| 空 | 不明确的'。类型 'MutableRefObject' 不可分配给类型 '((instance: HTMLSelectElement | null) => void) & RefObject'。类型“MutableRefObject”不可分配给类型“（实例：HTMLSelectElement | null）=> void”。类型“MutableRefObject”不匹配签名“（实例：HTMLSelectElement | null）：void”。HTML选择元素 | 空）=> 无效））| (((实例：HTMLSelectElement | null) => void) & RefObject<...>) | （（（（实例：HTMLSelectElement | null）=> void）&（（（实例：HTMLSelectElement | null）=> void））| 空 | 不明确的'。类型 'MutableRefObject' 不可分配给类型 '((instance: HTMLSelectElement | null) => void) & RefObject'。类型“MutableRefObject”不可分配给类型“（实例：HTMLSelectElement | null）=> void”。类型“MutableRefObject”不匹配签名“（实例：HTMLSelectElement | null）：void”。类型 'MutableRefObject' 不可分配给类型 '((instance: HTMLSelectElement | null) => void) & RefObject'。类型“MutableRefObject”不可分配给类型“（实例：HTMLSelectElement | null）=> void”。类型“MutableRefObject”不匹配签名“（实例：HTMLSelectElement | null）：void”。类型 'MutableRefObject' 不可分配给类型 '((instance: HTMLSelectElement | null) => void) & RefObject'。类型“MutableRefObject”不可分配给类型“（实例：HTMLSelectElement | null）=> void”。类型“MutableRefObject”不匹配签名“（实例：HTMLSelectElement | null）：void”。

这是我的代码：

codeandbox.io/s/eager-hertz-opbsi?file=/src/select.tsx

我究竟做错了什么？提前感谢所有有用的答案！

我将ModalPopup组件作为父组件，并且根据某些条件将购物车和订单表单呈现为子组件。对于每个组件，我在 modalPopup 中有单独的按钮，一旦子组件在modalPopUp中更改，就会呈现这些按钮。

我想在单击下订单按钮时​​从ModalPopUp组件调用orderForm组件方法。

在控制台下订单时出现错误。

index.js:1 警告：函数组件不能被赋予 refs。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？

请在此处参考stackblitz 示例代码。

我有以下组件将复选框转换为漂亮的切换开关

我在理解前向引用的工作原理时遇到了问题，并且遇到了一些错误。我也可能被 HOC 组件弄糊涂了

如果我像这样从不同的组件调用它：

它按预期工作，没有任何问题。但是，如果我按以下方式调用它：

我有一个从正文获取数据的表格组件：

每个键都是列。现在在表格组件中，我有一个基于类型的开关。如果类型 = “组件”

在这里我得到一个错误： Uncaught TypeError: component is not a function

任何帮助，将不胜感激。我查看了类似的问题，但找不到任何解决方案。谢谢

在与 React 和 TypeScript 中的类型和 forwardRefs 斗争了一段时间之后，我希望其他人可以为我解决这个问题。

我正在构建一个 DataList 组件，它由三部分组成：

• 容纳所有事件侦听器和逻辑的容器
• 列出自己，一个ul
• 列表项，一个li

最终，用法将如下所示：

为了实现我需要的功能，我使用了 React.forwardRef，但是我发现使用 TypeScript 很难做到这一点，因为我很难正确键入组件来接收 aref和children额外的 props。

DataListContainer
我本质上希望这个组件只处理逻辑和事件侦听器，同时返回主要的 DataList 组件（如下所示）。但这里的关键是我需要在这里创建 DataList ref 并将其分配给返回的组件。

DataList
我希望 DataList 组件只处理它的 UI 和道具。

不过，这并不完全正确。因为这个设置给了我错误