React.JS中的Ref错误 - createRef, useRef和使用Refs

Question

我正在尝试使用React中的ref属性。但是，我在浏览器中遇到了奇怪的错误，而我无法弄清楚问题所在。有人能解释一下为什么我会收到这个错误：

错误：不变性违规：addComponentAsRefTo（...）：只有ReactOwner可以拥有引用。这通常意味着您正在尝试将引用添加到没有所有者的组件上（也就是说，没有在另一个组件的render方法内创建）。尝试在新的顶级组件中呈现此组件，该组件将保存引用。

当我有以下代码时：

/**
* @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
);
}());

- John

---

你是在尝试使用href吗？如果不是，能否解释一下你使用ref的目的是什么？ - magnudae

谢谢回复，但我并不是在尝试使用href。我正在按照这个教程来使用ref属性，但是没有成功。 - John

好的，我已经尝试了一下。看起来问题在于h1被设置为顶级元素，是所有元素的父级。这意味着ref是多余的，因为外部没有需要引用的内容。这就是错误信息试图告诉你的。尝试扩展你的示例，像教程中的那个一样。 - magnudae

谢谢您的回复。我最终开始了一个新项目，现在它可以工作了，但我不明白为什么我的旧示例不能工作。也许其他地方出了问题，那个错误是万恶之源。还是非常感谢您。 - John

很好。我尝试了更多来解决你的问题，但这个错误非常不一致，所以可能是某些随机性在起作用。祝你的新项目好运。 - magnudae

Answer 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 拥有的。您的代码与上面粘贴的代码不同吗？

注意（来自文档）：

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. 

- Max Heiber

---

我不知道为什么我的示例没有起作用。最终我只能重新开始，然后才能使用ref标签。 - John

Answer 2

这个答案可能会对你有所帮助访问链接，仔细检查你的代码以解决以下两个问题，我的错误是由后者引起的。
在我的代码中，我写了require("React") require("React-dom")，实际上应该是require('react')，我修改了代码，它就可以工作了。所有的错误都是由这两个因素引起的。只需完全检查您的代码即可。

- yang mu

---

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