Question

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

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方法，但会收到语法错误：“ <”是未定义的标记。...

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

Answer 1

尝试使用此备用代码，看看是否适合您。显然，您需要babel脚本才能将text / babel标识为有效。

在此处查看In浏览器：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>

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

1 个答案: