gpt4 book ai didi

javascript - 在多个 <script> 标签之间分发代码

转载 作者:行者123 更新时间:2023-11-29 17:41:54 24 4
gpt4 key购买 nike

假设我的 HTML 文件中有以下代码,在 <body> 中标签:

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

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

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

上面的代码完美无缺。但是,如果我将其更改为以下内容:

<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>

我只看到一个空白屏幕。

如果 ReactDOM.render() 为什么 React 不工作调用是从一个单独的标签进行的?

最佳答案

因为您的脚本属于 text/babel 类型,这意味着它们将被转换为 JavaScript 并在不同的范围内进行评估。您可以将类存储在全局变量中,然后检索它以在不同的范围内使用它,如下所示:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

<script type="text/babel">
class Element extends React.Component {
render() {
return (
<h1>Hello, world!</h1>
);
}
}

window['Element'] = Element;
</script>

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

关于javascript - 在多个 &lt;script&gt; 标签之间分发代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52594116/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com