在 JS 文件中动态加载 React 组件答案

【问题标题】：Dynamically load React Component in JS file在 JS 文件中动态加载 React 组件
【发布时间】：2018-12-01 19:03:23
【问题描述】：

我有几个包含反应组件的反应文件，例如：

class MyComponent extends React.Component {
...
}

目前，我使用脚本元素导入它们，例如：

<script type="text/babel" src="http://127.0.0.1:3000/myComponent.js"> </script>

我想从单个 js 文件中动态加载它们。因此我遵循here提出的想法：

    var script = document.createElement('script');
     script.type='text/babel';
    script.onload = function () {
        console.log('done');
        resolve();
    };
    script.src = "http://127.0.0.1:3000/myComponent.js";

    document.head.appendChild(script);

但是，永远不会调用 onload，并且我在 Chrome 中没有收到任何错误消息。如果我将类型更改为“text/javascript”，则会调用 onload 方法，但出现语法错误：“

我知道我可以将 bable 文件编译为 js，但我不想在开发过程中这样做......

【问题讨论】：

您有任何解决方案或解决方法吗？

标签： javascript reactjs

【解决方案1】：

试试这个替代代码，看看它是否适合你。显然您需要 babel 脚本才能将 text/babel 识别为有效。

在浏览器中查看：https://babeljs.io/en/setup#installation

var script = document.createElement("script");
script.type = 'text/babel';
script.addEventListener("load", function(event) {
  console.log("Script finished loading and executing");
});
script.src = "https://code.jquery.com/jquery-3.3.1.min.js";
document.getElementsByTagName("script")[0].parentNode.appendChild(script);

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="output"></div>
<script type="text/babel">
  const getMessage = () => "Hello World"; 
  document.getElementById('output').innerHTML = getMessage();
</script>

【讨论】：