问题标签 [react-forwardref]

所以我有一个 DatePicker ChildComponent我需要ref从Parent访问它forwardRef。基本上一切正常。

但是有一个问题。

每次我在 Parent Other ChildComponents上更新与DatePickerChild没有任何关系的内容时， DatePicker 仍在呈现，即使它不应该呈现。

我试图删除 ref 从父级到子级的传递，然后每次我对要解决的其他组件进行更新时，该组件都不再重新渲染。

我已经通过使用优化开始使用回调记忆，useCallback但仍然没有运气。

下面是我的代码：

日期选择器.tsx

我不会只显示我的ParentComponent中的每个代码我传递给 DatePicker 的 props 和 refs。

我错过了什么吗？谢谢你的帮助。

我正在尝试通过父组件的连接组件（容器）从子组件调用函数。

当我尝试引用子组件时出现错误Property 'ref' does not exist on type 'IntrinsicAttributes & Pick<{ results: {}[]; }, never>'.

对不起，即将出现的代码墙，我试图尽可能地修剪代码。

这是父组件：

容器组件：

最后是 Searchbox 组件

谢谢您的帮助。

我在这里整理了一个小演示： https ://codesandbox.io/s/bold-meitner-r3wzq?file=/src/App.js

当我单击按钮以显示并专注于我的第一个单选按钮时 - 我的单选样式未应用。虽然，如果您紧接着按空格键，它会聚焦正确的元素。

奇怪的是，如果我在 1ms 超时后集中注意力，它会按预期工作。显然，这更像是一个黑客而不是一个解决方案......

我觉得我在这里遗漏了一些非常简单的东西，任何帮助都会很棒！

谢谢！！

或者 - 这是复制所需的所有代码：

我有一个sidebarCart组件，基本上是一个购物车组件，它被包裹在forwardRef钩子中，并包含useImperativeHandle以将函数传递给父级 App。在我引入useContext钩子之前一切正常，现在sidebarCart中的 refs 变为空，这是什么奇怪的行为？

我正在谈论的参考是cartContainer 和pageShdowCover 我发现当我停止我的 nodejs 服务器时，这个问题就消失了。

这是sidebarCart组件。

我有一个现有的组件层次结构，如下所示：

这一切都很好，但是现在我需要有条件地添加一个包装器组件，它包装<Child>组件以添加一些特殊情况的道具。

基本上我想要的是这样的：

我被困在如何将reffrom 从Child后面Wrapper传递到Parent，所以无论是否存在Parent都可以访问Child's ......refWrapper

我正在运行样式化组件的 v5，并且在扩展样式化组件时遇到了一些问题。我将在下面显示代码。

我有一个 Heading 组件，它返回一个包含 StyledHeading 的 React.FC。然后，在另一个文件中，我试图扩展 Heading. 但是，执行此操作时，标题组件甚至似乎都没有运行。我在组件中放置了一个控制台日志，但它没有呈现。

标题

用法

任何建议都会非常棒，因为我现在感觉很困难。谢谢！

我有入职和幻灯片组件。我将 ref 作为道具从带有 forwardRef 的入职组件中滑动组件。它工作正常，但打字稿给我一个错误

我的组件如下所示

错误是这样的；类型 '((instance: ScrollView | null) => void) | 上不存在属性 'current' MutableRefObject<ScrollView | 空>'。我该如何解决这个问题？谢谢。

迁移到 Material ui v4 并收到此错误

失败的道具类型：component提供给的道具无效Field。在字段中（由 TextField 创建）

哪个指向 redux 表单域组件

我相信在查看文档时它与 React.forwardRef 有关

试过了

1.)

Redux 表单指向forwardRef : boolean [optional] 添加时，问题仍然存在

2.)

component= {React.forwardRef((props, ref) => <renderTextField innerRef={ref} {...props} />)}

这是无效的。

我正在尝试在我的演示项目中实现正向 Ref，但我面临一个问题。来自 forward ref 的 current 的值是 null，但是一旦我重新渲染我的 NavBar 组件（通过发送一个 prop），我就会得到 current 的值。

我基本上需要从 NavBar 组件向下滚动到 Home 组件中的部分。可以通过直接提供 href 属性并传递 id 来完成。但我想了解 forward ref 的工作原理以及这种方法。

有人可以帮我吗？

这是我的代码。

我正在尝试制作一个 HOC，它返回一个带有 forwardRef 的组件，但不知道如何键入它这是代码

但是我得到了两个错误之一InputComponent

另一个在Input.Number

如果有人想尝试一下，这里有一个代码框链接：https ://codesandbox.io/s/dazzling-shape-rwmmg?file=/src/Input.tsx:0-959