title: What does 'Only a ReactOwner can have refs.' mean?
body: <p>I have a simple <code>react</code> component with a form in it:</p>
  
  <pre class="lang-js prettyprint-override"><code>var AddAppts = React.createClass({
      handleClick: function() {
          var title = this.refs.title.getDOMNode().value;
          ....
  
          var appt = {
              heading: title
              ...
          }
  
          CalendarActions.addAppointment(appt);
      },
  
      render: function() {
          return (
              &lt;div&gt;
                  &lt;label&gt;Description&lt;/label&gt;
                  &lt;input ref="title"&gt;&lt;/input&gt;
                  ...
              &lt;/div&gt;
          );
      }
  });
  module.exports = AddAppts;
  </code></pre>
  
  <p>I am trying to <code>render</code> this component in another <code>react</code> component:</p>
  
  <pre class="lang-js prettyprint-override"><code>  var AddAppt = require('./AddAppts');
  
    render: function() {
      return (
        &lt;div&gt;
          &lt;AddAppt /&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>but I get this error: </p>
  
  <pre class="lang-js prettyprint-override"><code> Uncaught 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.
  </code></pre>
  
  <p>I have googled it, but cannot figure out what I need to do to fix this issue. </p>