如何forwardRef在具有连接功能的类组件中使用react-redux？

子组件

我不知道如何React.forwardRef()在类组件中使用。

我需要使用功能组件，所以我不能直接使用 useRef。这是我的代码：

在线代码： https ://stackblitz.com/edit/forwardref-z68drh?file=src/App.js

我想在父组件上触发子组件的功能......有人可以帮助我吗？

编辑：这个问题是因为我试图将 forwardRef 与 Redux 连接一起使用。看看这篇文章的解决方案。

我正在尝试使用 React.forwardRef 访问父组件中的 DOM 元素。问题是 ref.current 永远不会被定义，即使在第一次渲染之后也是如此。

在这个父组件中，我想从一个子组件访问一个 DOM 元素：

接收转发的 ref 的组件：

需要从转发的 ref 派生的一些数据的组件：

对讨论 forwardRef 始终为 null 或 undefined 的现有 SO 问题的答案指出 ref 只会在第一次渲染后定义。我不认为这是这里的问题，因为 useEffect 应该在第一次渲染之后运行，但 bannerRef.current 仍然为空。

如果在带有普通 ref 的 Banner 组件内部使用，使用useEffect 挂钩设置 bannerIndent 值的逻辑可以正常工作。但是，我需要将 ref 放在父组件中，以便可以将 bannerWidth（使用转发的 ref 生成）传递给 Banner 组件的兄弟。

帮助将不胜感激：D

我想定义一个LinkButton组件，它的行为就像一个链接，看起来像一个按钮。

我的基本实现抱怨我需要使用 React.forwardRef，但是我不确定如何正确执行此操作，尤其是使用道具转发。

即使我只是输入道具，因为any我仍然收到系统的投诉说道具无效。

我想知道如何在这种情况下（或任何情况下）正确使用 forwardRef 。

我的尝试如下所示：

我遇到了裁判的情况，只是在寻找解决方法。

https://github.com/styleguidist/react-docgen-typescript/issues/314

使用本质上是 React.forwardRef 的实用程序方法破坏了我的 Storybook 中的自动类型文档。

我不介意暂时导出 2 个组件：

1. 一个没有 forwardRef 的 Storybook
2. 一个带有 forwardRefWithAs 的应用程序使用

然而，这显然不只是......“工作”，因为 refs 没有在正常函数中隐式传递。

这样的事情可行吗？有什么问题吗？

我也可以这样做：

你怎么看？

迄今为止我最好的尝试的最小示例：

正如你在这个构造中看到的，没有地方声明类型参数。我该如何表达？

我的 Gatsby 站点在每个页面上都使用相同的 GSAP 时间线，所以我想保持干燥，我的想法是按该顺序将我的时间线包含在我的布局组件中。

但我不知道如何使用 forwardRef 在孩子和布局之间传递我需要的参考。

简而言之，我不知道如何处理页面和布局之间的sectionsRef部分。sectionRef 取决于页面内容（子项），但在布局中的时间线中是必需的。

我如何在这两者之间共享sectionRef（我尝试了很多东西但总是导致错误）？

这是布局中没有参考的代码框： https ://codesandbox.io/s/jolly-almeida-njt2e?file=/src/pages/index.js

以及布局中带有 refs 的沙箱： https ://codesandbox.io/s/pensive-varahamihira-tc45m?file=/src/pages/index.js

这是我的文件的简化版本： Layout.js

index.js（页面）

任何线索都非常感谢:)

当我在TextArea组件中的textarea上按 Enter 键时，焦点应位于Editor.js组件的textarea中。 这是我的父组件。

textarea.js（第一个孩子）

编辑器.js

我需要用按钮制作一个样式组件 div，按钮生成 div 的大小。然后嵌套在 div 组件内的组件显示大小。它必须使用 forwardRef 并且两个组件都必须正常工作。

基本组件代码：

该组件是一个简单的样式组件 div，其宽度和高度来自道具。得到 ref 就好了，我可以在控制台中打印它，它确实显示了元素的当前大小。但是，当我尝试通过 innerRef.current.offsetWidth 获取宽度/高度值时，它会得到上一代的结果。这是代码：

我会很感激任何帮助，我一直在寻找答案太久了，这真的不应该是那么艰巨的任务......

我们为我自己的项目提供了一个反应组件库。它是用 js 编写的（自定义材料-ui 库；）））。我的任务是将组件从 js 一个一个迁移到 ts。
这是组件的示例：

当我尝试在主应用程序中使用这个组件时，它给出了这样的错误

但是当我通过所有道具时，它可以正常工作：

它要求提供所需的参数，例如颜色、组件和下划线。即使它们在 defaultProps 中。
我试图在解构组件中的道具时分配 defaultProps ：

但是故事书文档无法识别这些 defaultProps。
我不想仅为故事书文档复制 defaultValues。

所以我的问题是，有没有办法在打字稿中通过 Component.defaultProps 分配 defaultValues？