如何從另一個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：

var WelcomeView = React.createClass({ 

render: function() { 
    ... 
} 

} 

}); 

index.html中

：

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

編輯：凱什山是正確的。您沒有使用模塊捆綁器，因此導入不起作用。將這些類附加到窗口可能會有所裨益。