別のjsページからコンポーネントをレンダリングする方法reactjs？

Question

私はreactjsに新しいです。私は複数のページに複数のクラスがあります。私の受信エラー：

ReferenceError: WelcomeView is not defined

Chat.js：

var Chat = React.createClass({ 

render: function() { 
return (
    <div> 
    <WelcomeView /> 
    <MainView /> 
    </div> 
); 
} 

}); 

ReactDOM.render(<Chat />, document.getElementById('app')); 

WelcomeViewとMAINVIEWは別のページです。

WelcomeView.js：index.htmlをで

var WelcomeView = React.createClass({ 

render: function() { 
    ... 
} 

} 

}); 

：

<script src="react/build/react.js"></script> 
<script src="react/build/react-dom.js"></script> 
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script> 

<script src="script/WelcomeView.js" type="text/babel"></script> 
<script src="script/MainView.js" type="text/babel"></script> 
<script src="script/Chat.js" type="text/babel"></script> 

Answer 1

あなたWelcomeViewとMAINVIEWコンポーネントへの参照がありません。

WelcomeView.js

window.WelcomeView = React.createClass({  
    render: function() { 
     ... 
    } 
}); 

Chat.js

var MainView = window.MainView; 
var WelcomeView = window.WelComeView; 

var Chat = React.createClass({  
    render: function() { 
     return (
      <div> 
       <WelcomeView /> 
       <MainView /> 
      </div> 
     ); 
}); 

ReactDOM.render(<Chat />, document.getElementById('app')); 

編集：KESHシャンは正しいです。モジュールバンドラを使用していないため、インポートは機能しません。クラスをウィンドウにアタッチすると、そのトリックを行うことができます。