React.JS Ref 中的 Ref 错误 - createRef、useRef 和 using Refs

Posted 2023-02-23

【中文标题】React.JS Ref 中的 Ref 错误 - createRef、useRef 和 using Refs

【英文标题】：Ref error in React.JS Ref - createRef, useRef, and using Refs

【发布时间】：2015-01-31 18:00:25

【问题描述】：

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

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

当我有这个代码时：

/**
* @jsx React.DOM
*/
(function()
var react = require('react');


var App = react.createClass(

    render: function() 
        return (
            <h1 ref="myRef">This is a test</h1>
        );
    

);

react.render(
    <App />,
    document.body
);
());

【问题讨论】：

你想做一个href吗？如果没有，您能解释一下您使用 ref 的目的是什么吗？

感谢您的回复，但我并没有尝试使用href。我正在关注tutorial 如何使用 ref 属性，但没有成功。

好的，我自己尝试了一点。似乎问题在于 h1 被设置为***元素，即所有元素的父元素。这意味着 ref 是多余的，因为外部没有任何东西需要 ref。这就是错误消息试图说明的内容。尝试像教程中的那样扩展您的示例。

感谢您的回复。我最终开始了一个新项目，现在它可以工作了，但我不明白为什么我的旧示例没有。也许是别的什么地方出了问题，而那个错误是万恶之源。不过谢谢。

太棒了。我尝试了更多来找出您的问题，但是该错误非常不一致，因此这里可能存在一些随机性。祝你的新项目好运。

【参考方案1】：

你的代码是正确的。

工作 jsFiddle：http://jsfiddle.net/reactjs/69z2wepo/

var App = React.createClass(

    render: function() 
        return (
            <h1 ref="myRef">This is a test</h1>
        );
    

);

React.render(
    <App />,
    document.body
);

根据错误消息，您将 ref 放置在未拥有的元素上，但在您提供的代码中，h1 归 App 所有。您的代码与上面粘贴的代码不同吗？

注意（from the docs）：

In React, an owner is the component that sets the props of other components ... 
It's important to draw a distinction between the owner-ownee relationship and the parent-child relationship. 

【讨论】：

我不知道为什么我的示例不起作用。我最终重新开始，然后我就可以使用 ref 标签了。

【参考方案2】：

这个答案可能对你有帮助visit，仔细查看你的代码针对这两个问题，我的错误是后一个问题造成的。 在我的代码中，我写了require("React") require("React-dom")，实际上是require('react')，我修改了我的代码，它起作用了。所有的错误都是由这两个因素造成的。只需完全检查您的代码。

【讨论】：

感谢您的建议。正如之前的评论中提到的，我最终启动了一个新项目来解决这个问题，所以我无法确认你的答案。