从 txt/javascript 中的 react 调用 javascript 函数

Question

所以我有这个反应组件，我想在烧瓶提供的纯 html 页面中使用

一切都很好，我的构建/开发与 gulp但是现在我想在我的烧瓶应用程序中使用特定零件

所以在我的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

看起来您正在使用模块捆绑器来处理依赖项。也许是浏览器化或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;

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