问题标签 [react-ref]

我正在尝试ref使用 React 使用该属性。我的浏览器出现一个奇怪的错误，我无法弄清楚问题所在。谁能向我解释为什么我会收到此错误：

错误：不变违规：addComponentAsRefTo(...)：只有 ReactOwner 可以有 refs。这通常意味着您正在尝试将 ref 添加到没有所有者的组件（即不是在另一个组件的render方法中创建的）。尝试在一个新的顶级组件中渲染这个组件，该组件将保存 ref。

当我有这个代码时：

我有一个ref定义了 a 并最终呈现到页面中的元素：

我想访问 DOM 元素属性之类的offset...东西。然而，我不断得到undefined，我不知道为什么。经过一番搜索，很明显refs只适用于一个文件，但除了这一页之外，我没有在任何地方使用它。我这样说是为了记录它：

console.log('REFS', this.refs.russian);

这可能是什么原因造成的？

我在滚动到我的平面列表顶部时遇到了很多麻烦，所以任何帮助都将不胜感激！

本质上，它从 firebase 获取前 5 个项目，然后当调用 onEndReached 时，我们将接下来的 5 个项目附加到列表中：

现在，我的视图顶部有一个刷新按钮，它执行以下操作：

如果我在呈现前 5 个项目时单击它，它会按预期滚动到列表顶部。仅在将列表附加到后才会出现此问题（我猜这些项目不在视图中？）。

我也尝试过“ScrollToItem”，但我猜这不起作用，因为 React Native 文档中的以下内容：

注意：如果不指定 getItemLayout 属性，则无法滚动到渲染窗口之外的位置。

谁能解释发生了什么或知道我做错了什么？

先感谢您！

getItemLayout：（不完全确定这是做什么或如何计算长度和偏移量等）

我正在为应用程序使用 Material-UI 和 styled-components，并且我正在尝试将 ref 向下传递到<button>MUI 创建的根节点。MUI 有一个buttonRef用于访问它的道具，所以这很简单，但是我使用 styled-components 来设置 MUI 的 Button 组件的样式，如下所示：

我也已经在该按钮的样式中非常依赖动态 CSS，这就是为什么我不能只使用常规 CSS 样式表并直接访问 MUI 的 Button，例如：

Styled-components 有一个 innerRef 属性...

..但我不知道如何从那里再往下一层进入按钮。有任何想法吗？

我试图弄清楚我需要如何使用React.createRef()typescript 来反应本机，因为以下代码会引发错误

当前引发以下错误this.circleRef.current.setNativeprops

[ts] 对象可能为“空”。（属性）React.RefObject<{}>.current: {} | 无效的

和

[ts] 类型“{}”上不存在属性“setNativeProps”。任何

有任何想法吗？

我正在使用 TypeScript 构建一个 React 应用程序。我正在使用 React-Slick 的轮播。

我正在尝试以编程方式更改轮播的幻灯片。因此，我按照文档并尝试为 Slider 创建一个 ref。

现在 TypeScript 抱怨它现在没有滑块。所以我试着像这样声明它：

如果我这样尝试，我会收到错误消息：

应该如何使 ref 与 TypeScript 一起工作？

我能找到的唯一方法是说：

这违背了 TypeScript 的目的。

编辑： Tolle您将此问题标记为重复。但不同的是，这里的 ref 是这样创建的：

并以这种方式在您提出的原始问题中：

注意：我之前问过这个问题。Tolle您将该问题标记为该问题的重复项。但它是不同的，在我的例子中，ref 是这样创建的：

并以这种方式在您提出的原始问题中：

您提出的原件的答案是这样做：

但是我不能这样做：

因为我收到错误：

话虽如此，这里是一个问题：

我正在使用 TypeScript 构建一个 React 应用程序。我正在使用 React-Slick 的轮播。

我正在尝试以编程方式更改轮播的幻灯片。因此，我按照文档并尝试为 Slider 创建一个 ref。

现在 TypeScript 抱怨它不知道滑块。所以我试着像这样声明它：

如果我这样尝试，我会收到错误消息：

应该如何使 ref 与 TypeScript 一起工作？

我能找到的唯一方法是说：

这违背了 TypeScript 的目的。

我很难在上下文提供程序中设置 ref。这是不可能的还是我遗漏了什么？我能够以相同的方式在其他组件中创建Refs，但以下始终将 ref 显示为 { current: null }

然后我的应用程序就这样包装了

任何帮助表示赞赏！

我正在使用 TypeScript 构建一个 React 应用程序。

我想创建一个按钮，它滚动到我主页上子组件的标题。

我在子组件中创建了一个引用，遵循这个堆栈溢出答案并（试图）使用前向引用在我的父组件上访问它。

不幸的是，当我触发时，scrollToTestTitleRef我得到了错误：

这意味着 ref 是未定义的。这是为什么？我究竟做错了什么？

编辑： 埃斯图斯帮助我创建了裁判。但是当我触发scrollToTestTitleRef()事件时，它不会滚动。当我console.log this.testTitleRef.current得到输出时：

注意：我删除了cacheClasses,_reactInternalFiber和 的键__reactInternalMemoizedMaskedChildContext，因为它们包含循环依赖。

所以 current 似乎没有offsetTop. 这可能与在我的实际应用程序中子组件包装在 material-ui'swithStyle和 React-Redux'中的事实有关connect吗？

我有两个兄弟组件WebcamStream，并且CaptureArea我想将引用WebcamStream作为 prop传递CaptureArea，但是当我这样做时，它始终为空。如何解决这个问题？

为什么我需要这个： CaptureArea在当前标签上生成临时画布video以从中获取 imageData。我使用 imageData 来解析二维码。