反応参照が機能しない不変の違反：addComponentAsRefTo

Question

反応成分にrefを追加する際に問題があります。以下はエラーメッセージです。

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 

リサーチはこの原因が考えられ、いずれも問題ではないようです。

のみReactOwnerは

REFSこれが最も可能性の高い原因は反応すると私の不慣れに行うであることができます。私は、コンテナをレンダリングしてから、select要素をコンテナにレンダリングします。

コード

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

あなたは、コンポーネントのrender（）関数の外部で作成されている要素に参照を追加しようとしています。

refは、render関数内で定義されているため、問題ではないようです。このコンポーネントが別のコンポーネントに追加されていることが原因である可能性がありますか？リアクト

の

複数コピー

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 

はどちらか重複したパッケージがあるように思えないのですか？ここで何が起こっているのでしょうか？

Answer 1

私は同様の問題があり、文字列リファレンスを使用しないことで解決できました。

グッド：

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

悪い：

<input ref="textInput" /> 

チェックアウトここドキュメント：

を「あなた場合：彼らは実際にそれをしないと言う https://facebook.github.io/react/docs/refs-and-the-dom.html

前にReactで作業していた場合、古いAPIに精通している可能性がありますe ref属性は "textInput"のような文字列であり、DOMノードはthis.refs.textInputとしてアクセスされます。文字列リファレンスにはいくつかの問題があり、レガシーと見なされ、将来のリリースのいずれかで削除される可能性があるので、これに対して反対することをお勧めします。現在、this.refs.textInputを使用して参照情報にアクセスしている場合は、代わりにコールバックパターンを使用することをお勧めします。 "