问题标签 [react-forwardref]

我需要使用转发的 refs

我也碰巧已经有这样写的代码

基本上我的 InfoBox 需要是一个组件，因为它拥有一些状态，但我也希望它表现得像一个可以从父级接收引用并将它们转发给子级的对象（基本上是 React.forwardRef）

在熟悉了 React.forwardRef 之后，我不知道如何让它与我现有的 React 组件一起工作，这些组件已经具有附加到状态的功能。

我是否需要将两个对象分开，并将一个包裹在另一个对象中，或者有没有办法可以在同一个对象中实现这一点？

包装信息框的代码看起来像

我是否正确使用转发的参考？

我正在尝试从另一个组件调用一个函数，使用老式的 react Class 样式我可以轻松地做到这一点，因为我试图挂钩我面临的所有此类问题

当我们使用参考调用 setText() 时，此代码不起作用：

这是可编辑的代码：https ://codesandbox.io/s/reactforwardrefproblem-ublk0

感谢您的帮助

我有一个问题，我想测试一些转发的参考。我能够让这些转发的引用在我的浏览器中正常工作，但在测试环境中我看到了不同的行为。

您可以在这里浏览我的完整复制应用程序https://github.com/jasonfb/jest-playground-2

快速概览：

// 应用程序.js

// abc_container.js

// def_thing.js

除此之外，这是基本的 create-react-app，有一些依赖项

// 包.json

您可以在这里浏览我的完整复制应用程序https://github.com/jasonfb/jest-playground-2

在开发中，在我的浏览器中，转发的 ref 有效。2.5 秒后（任意），AbcContainer 中的代码通过使用对 DefThing 的 ref 获取其位置，并在其上获取 '.getBoundingClientRect()`，如下所示：

this.def_thing_ref.current.getBoundingClientRect()

（参见 abc_container.js #componentDidMount）

在我的浏览器中，这可以正常工作，并且current转发的 ref 已填充

但是，在运行规范时我无法让它工作。这是我的规格

// abc_container.test.js

// App.test.js

//def_thing.test.js

不幸的是，我在 abc_container 中遇到了这个失败，这表明了这个问题：

如您所见，它不应该this.def_thing_ref返回。{ current: null }在真正的浏览器中，它返回{current: div.sc-bVVdaja.hwwsLL}表明 ref 工作正常

似乎在测试设置中让 Forwarded Refs 工作缺少一些东西

2019 年 12 月 13 日更新：

我在这方面取得了一点进展。我想我的测试文件中没有包含 ReactDOM。我的新测试文件看起来像

//def_thing.test.js

//abc_container.test.js

通过修改测试文件，我成功地使 Forwarded ref显示为填充：

但是，当我调用 getBoundingRectRect()

请拉 repo 并运行规范yarn test --watchAll --coverage

更新 2019-12-13@13-23EST：

基本上现在发生的事情是我认为我已经将其隔离为 setTimeout 的问题

由于某种原因，我看不到，当我立即从内部检查对象时，componentDidMount我看到正确填充了参考（现在是 def_ref 和 abc_ref）：

//abc_container.js

但是，如果我将其包装在 asetTimeout中，则 refs 似乎仍然是 refs，但它们的输出为{current: null}

当修改为在setTimeout代码中时，如下所示：

// abc_container.js

在这里它产生：

如您所见，在 2.5 秒超时后检查时，Refs 对象似乎恢复（？）为 { current: null }

我有一个关于在 React 测试库中使用 DOM 元素的一般性问题。

本质上，我有几个嵌套组件，其中一个创建了一个 React ref，它被转发到一些子组件（下面的代码）。

当它这样做时，它会渲染子组件并检查嵌套的 Ref 以调用.getBoundingClientRect()一个神奇的原生 Javascript 函数，该函数为我提供 x 和 y 定位、宽度和高度以及顶部、底部、左侧和右侧边界。我真的需要这些信息，因为我想用它做一些其他事情，而不直接修改 DOM（我正在使用 setState 进行所有 DOM 修改并让 React 重新渲染 DOM）

在开发（Chrome）中，当我这样做时，console.log(this.thing_one_ref.current.getBoundingClientRect())我得到了这个结果：

（您会注意到，一旦我的应用程序呈现 - 而不是之前 - 并且看起来像这样，这里的 thing_one_ref 就会正确填充：）

我对此代码有一个简单的规范，它恰好通过了，但即使它通过了，在测试环境中控制台记录的输出看起来像这样：

请注意，所有值都是 0 而不是我所期望的，这是要呈现的元素，就好像它在真实的 DOM 上一样

// src/App.test.js

// src/App.js

// src/container.js

// src/thing_one.js

如何让测试环境表现得就像它安装在真实的 DOM 中一样，并配有可用于三角函数和动画的笛卡尔平面？我有一些工作代码取决于看起来像这个结果的结果（如上所述，在浏览器中工作）getBoundingClientRect()

完整的源代码可以参考这里：

https://github.com/jasonfb/jest-playground-3

我正在尝试在使用eslint和prop-types的项目中将 forwardRef 用于 Button 。

这是我到目前为止所尝试的，以及我每次得到的错误：

第一次尝试

这将在控制台中给我以下警告：Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?

第二次尝试

我得到：action is missing in props validation。

第三次尝试

这一次，我得到：Component definition is missing display name。

那么正确的方法是什么？

我想知道您可以在嵌套应用程序中将 forwardRef 向下传递多深，以及如何将它传递下去？

像这样的东西：

然后在 GreatGrandChild 组件中使用它或将 Parent 中的 ref 和元素向下传递给 GreatGrandChild

我在 ReactJS 的 Typescript 中遇到 forwardRef 问题。

我的目标是包装引导程序 FormControl 并在其上提供一些简单的逻辑，然后在其上构建。我知道 FormControl 将其引用转发给输入元素。

现在，如何将组件中的引用转发到 FormControl 正在转发的引用。我的代码现在看起来像这样：

在 ref={ref} 行我收到错误：

我只是无法根据错误消息弄清楚这里有什么问题。这对我来说太复杂了。有人可以在这个例子中提供帮助吗？

我需要访问子组件的位置。据我了解，要访问子属性，我需要使用useImperativeHandle将子 API 添加到其引用中。此外，我需要使用forwardRef将参考从父母传递给孩子。所以我这样做了：

如您所见， ref 没有该getBoundingClientRect属性，但如果我这样做，它将按预期工作：

那么我对useImperativeHanedleand的理解有什么问题forwardRef呢？

我试图找出一个 div 是否有溢出的文本，show more如果有，则显示链接。我找到了这个 stackoverflow 答案来检查 div 是否溢出。根据这个答案，我需要实现一个函数，该函数可以访问相关元素的样式并进行一些检查以查看它是否溢出。如何访问元素的样式。我尝试了两种方法

1.使用参考

2.使用前向引用

子组件

父组件

但是我在这两种方法中都遇到了以下错误 - Cannot read property 'style' of null。我究竟做错了什么？我怎样才能达到我想要的？

我正在使用以下软件包为我正在处理的应用程序创建自动完成解决方案：

• 材质界面 4
• 反应自动完成输入

我正在尝试通过传入 material-ui组件 来使用Componentreact-autocomplete-input 元素上的道具。TextareaAutosize

直接从 MUI 传入 TextareaAutosize

这可行，但是我无法控制它获得的道具。

通过自定义组件，我可以添加道具

这会使自动完成功能完全停止工作。但是，占位符仍然正确显示，这意味着道具至少可以通过。

您可以在下面的沙箱中看到所有示例。

示例： https ://codesandbox.io/s/frosty-wildflower-48iyd