React ref funktioniert nicht Invariant Violation: addComponentAsRefTo

Question

Ich habe ein Problem mit einem ref zu einer react-Komponente hinzufügen. Unten ist die Fehlermeldung.

invariant.js:39Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded 

Die Forschung zeigt mögliche Ursachen dafür, und beide scheinen nicht das Problem zu sein.

Nur ReactOwner können Refs

haben diese die wahrscheinlichste Ursache ist mit reagieren auf meine Fremdheit zu tun. Ich habe einen Container gerendert und dann ein Select-Element in den Container gerendert.

-Code

var React = require('react'); 

var first_container = React.createClass({ 
    render: function() { 
     return (
      <div id='first-container' className='jumbotron'> 
       <div className='row'> 
        <button type='button' className='btn btn-primary'>Submit Query</button> 
       </div> 
     </div> 
     ); 
    } 
}); 


var product_selections = React.createClass({ 
    handleChange: function() { 
     console.log("hello"); 
    }, 
    componentDidMount: function(){ 
     $(this.refs['product-select']).select2({ 
     change: this.handleChange 
     }); 
    }, 
    render: function() { 
     return (
      <div className='row'> 
       <br/> 
       <label htmlFor='product-dropdown'> 
        Product 
        <br/> 
        <select ref='product-select' className='js-example-basic-multiple js-states form-control' id='product-dropdown' multiple='multiple'> 
        </select> 
       </label> 
      </div> 
     ); 
    } 
}); 

Sie versuchen, eine ref zu einem Element hinzuzufügen, die außerhalb einer Komponente render() Funktion erstellt wird.

Die Ref ist innerhalb der Render-Funktion definiert, so dass es nicht das Problem scheint. Könnte es sein, dass diese Komponente zu einer anderen Komponente hinzugefügt wird?

Mehrere Kopien von React

npm ls | grep react 

├─┬ react@15.2.1 
├── react-addons@0.9.0 
├── react-bootstrap@0.29.5 extraneous 
├── react-dom@15.2.1 
├─┬ reactify@0.15.2 
│ ├─┬ react-tools@0.12.2 

Es scheint nicht ein Duplikat Paket zu sein? Irgendwelche Ideen, was hier passieren könnte?

Answer 1

Ich hatte ein ähnliches Problem und konnte es auflösen, indem ich keine Zeichenkettenreferenzen verwendete.

Gut:

<input ref={(input) => { this.textInput = input }} /> 

Bad:

<input ref="textInput" /> 

Überprüfen Sie die docs hier aus: https://facebook.github.io/react/docs/refs-and-the-dom.html

Sie sagen, eigentlich gar nicht tun:

„Wenn Sie früher mit React gearbeitet, kennen Sie vielleicht eine ältere API Das ref-Attribut ist eine Zeichenfolge wie "textInput", und auf den DOM-Knoten wird als this.refs.textInput zugegriffen. Wir raten davon ab, da Zeichenfolgenreferenzen einige Probleme haben, als veraltet gelten und wahrscheinlich in einer der zukünftigen Versionen entfernt werden. Wenn Sie this.refs.textInput verwenden, um auf refs zuzugreifen, empfehlen wir stattdessen das Callback-Muster. "