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

Question

所以我有这个 React 组件，我想在 Flask 提供的纯 html 页面中使用

我的 gulp 构建/开发一切正常但现在我想使用我的 flask 应用程序中的特定部分

所以在我的 app.js 中我有

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

exports = RenderX;

现在我想在我的html页面中调用这个函数(由flask提供)

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

它告诉我找不到 RenderX我该如何解决我面临的这个问题

我想一点一点地迁移我的代码的某些部分来使用react。

Answer 1

看起来您正在使用模块 bundler 来处理您的依赖项。也许是 Browserify 或 Webpack？

exports = RenderX;

当模块 bundler 组合您的文件来创建 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;

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