從 txt/javascript 中的 react 調用 javascript 函數

Question

所以我有這個反應組件，我想在燒瓶提供的純 html 頁面中使用

我使用 gulp 構建/開發一切正常但現在我想在我的燒瓶應用程序中使用特定部分

所以在我的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我該如何解決我面臨的這個問題

我想一點一點地遷移我的代碼的一部分來做出反應。

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只是由模塊捆綁器處理的值。

相反，直接在 window 對象上聲明函數。

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

window.RenderX = RenderX;

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