Ref error in React.JS Ref - createRef, useRef, and using Refs

Question

I am trying to use the ref property using React. I get a strange error in my browser, and I am not able to figure out what the problem is. Can anyone explain to me why I get this error:

Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's render method). Try rendering this component inside of a new top-level component which will hold the ref.

when I have this code:

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

Ias

Are you trying to do an href? If not, can you explain what your purpose with ref is? – Kannry

Thanks for the reply, but I am not trying to use href. I am following this tutorial on how to use the ref property, but with no success. – Ias

Ok, I have tried a little on my own. Seems like the problem is that h1 is set to be the top-element, parent of all. This means that ref is redundant since there is nothing outside that needs the ref. This is what the error-message is trying to tell. Try to expand your example like the one in the tutorial. – Kannry

Thank you for your reply. I ended up starting a new project, and now it works, but I do not understand why my old example did not. Maybe something else was wrong, and that error was the source of all evil. Thank you though. – Ias

Great. I tried some more to figure out your problem, but the bug was very inconsistant so it might have been some randomness at work here. Good luck with your new project. – Kannry

Answer 1

Your code is correct.

Working 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
);

According to the error message, you're placing a ref on an un-owned element, but in the code you provided the h1 is owned by the App. Is your code different from what you pasted above?

Note (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. 

Rigatoni

I do not know why my example did not work. I ended up starting over again, and then I was able to use the ref tag. – Ias

Answer 2

This answer may help you visit, check out your code carefully to aim at these two questions, my error is caused by the latter one.
In my code, I've written require("React") require("React-dom"), actually it is require('react'), I modified my code, it worked. All the errors are caused by the two factors. Just check your code completely.

Incidence

Thanks for the advice. As mentioned in a previous comment, I ended up starting a new project to solve the issue, so I am not able to confirm your answer. – Ias