從JavaScript調用功能TXT/JavaScript的反應

Question

所以我有這樣的反應成分，我想通過燒瓶一飲而盡 擔任

所有的正常工作與我的生成/開發一個簡單的HTML頁面內使用，但現在我想在我的燒瓶應用

所以在使用特定的部分我app.js我有

var RenderX = function() { 
    ReactDOM.render(
     <Example/>, document.getElementById('app') 
    ); 
}; 

exports = RenderX; 

現在我想調用這個函數在我的html頁面（按瓶服務）

<script src="/static/scripts/vendor.js"></script> 
<script type="text/javascript" src="/static/scripts/app.js"></script> 
<script type="text/javascript">RenderX();</script> 

它告訴我RenderX無法找到 我怎樣才能解決這個問題，我面對

我想有點遷移我的代碼位的某些部分反應。

Answer 1

看起來您正在使用模塊捆綁器來處理您的依賴關係。也許Browserify或Webpack？

exports = RenderX; 

當模塊捆綁結合您的文件創建scripts/app.js纏裹他們每個人在立即調用函數表達式。

// simplified version 
(function(module, exports) { 
    var RenderX = function() { 
    ReactDOM.render(
     <Example/>, document.getElementById('app') 
    ); 
    }; 

    exports = RenderX; 
})(); 

設置exports不公開你的功能作爲一個全局變量，因爲exports只是由模塊捆綁處理的值。

而是直接在窗口對象上聲明函數。

var RenderX = function() { 
    ReactDOM.render(
    <Example/>, document.getElementById('app') 
); 
}; 

window.RenderX = RenderX; 

這樣你就可以從你的模塊範圍之外調用它。