从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; 

这样你就可以从你的模块范围之外调用它。