コンポーネントのrenderメソッドへの参照を追加する必要があります。 addComponentAsRefTo（...）

Question

私は次のエラーを理解していると信じていますが、解決策を完全に理解していません。

Uncaught Error: 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

import Modal from 'react-bootstrap-modal'; 
//import MyCustomObject from './MyCustomObject'; 
import ReactTelInput from 'react-telephone-input'; 

... 
render(){ 
    return (
     <Modal show={this.props.showModal}> 
      <Modal.Header> 
       <Modal.Title>This is a heading </Modal.Title> 
      </Modal.Header> 
      <Modal.Body> 
        <ReactTelInput 
         defaultCountry="us" 
         flagsImagePath='../../images/flags.png' 
         onChange={this.handleInputChange} 
         onBlur={this.handleInputBlur} 
        /> // was previously <MyCustomObject/> 
      </Modal.Body> 
      <Modal.Footer> 
       <Button onClick={this.props.changeModal}>Close</Button> 
      </Modal.Footer> 
     </Modal> 
    ); 
} 

私understandinngはモーダルMyCustomObjectを認識していないので、それはそれをレンダリングする方法は考えていないということです。では、どうすればこの問題を回避できますか？ MyCustomObjectをModalオブジェクトに直接追加する方法はありますか？私の次のアイデアは、独自のモーダルクラスを作成し、反応ブートストラップモーダルを拡張し、この拡張をMyCustomObjectからインポートするだけでしたが、これも機能しませんでした。

私は自分のオブジェクトをreact-bootstrap-modalのようなものの中にどのようにレンダリングできますか？

Answer 1

私はfacebookの独自の反応の実装方法を使っていたので、この問題は分かりませんでした。私のindex.cshtmlファイルには、次のものがありました。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script> 

したがって、反応はノードモジュール経由で1回、ここでは1回読み込まれました。これは技術的にノードモジュール経由で一度だけ反応したので、これは難解でした。それをcshtmlにロードすることは、私を台無しにしていたものでした。

したがって、私はwebpack.configファイルに追加して、正しく反応させ、cshtmlからスクリプトを削除する必要がありました。

loaders: [ 
    { 
     test: /.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
    }