Javascript 在多个服务器之间分发代码<；脚本>；标签

假设我在HTML文件中的

标记中有以下代码：

<div id="root"></div>

<script type="text/babel">
    class Element extends React.Component {...}

    ReactDOM.render(<Element />, document.getElementById("root");
</script>

类元素扩展了React.Component{…}
ReactDOM.render（，document.getElementById（“根”）；

上面的代码可以完美地工作。但是，如果我将其更改为以下内容：

<div id="root"></div>

<script type="text/babel">
    class Element extends React.Component {...}

</script>

<script type="text/babel">
    ReactDOM.render(<Element />, document.getElementById("root");
</script>

类元素扩展了React.Component{…}
ReactDOM.render（，document.getElementById（“根”）；

我只看到一个空白屏幕

---

如果

ReactDOM.render（）

调用是从一个单独的标记进行的？

因为您的脚本类型为

text/babel

，这意味着它们将被转换为JavaScript并在不同的范围内进行计算。您可以将类存储在全局变量中，然后检索它以在不同的范围内使用，如下所示：

类元素扩展了React.Component{
render（）{
返回(
你好，世界！
);
}
}
窗口['Element']=元素；
变量元素=窗口['Element']；
ReactDOM.render(
, 
document.getElementById（“根”）
);

它工作正常

包裹沙箱
类元素扩展了React.Component{
render（）{
返回(
你好
)
}
}
ReactDOM.render（，document.getElementById（'root'））；

您的控制台中有错误吗？哇，通过给定的URL导入时，它可以工作，但不能从本地存储的.js文件导入。我将研究差异。可能是不同的版本？这太完美了！