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

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. 

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.