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

时间:2018-12-01 19:03:24

标签: javascript reactjs

我有几个包含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,但在开发过程中我不想这么做...

1 个答案:

答案 0 :(得分:0)

尝试使用此备用代码,看看是否适合您。显然,您需要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>