javascript - ReactJS - 创建脚本元素

Question

我想知道我可以使用 React 创建一个脚本元素，例如:

var reactScriptElement = React.createElement('script', {src: "d.js"});
ReactDOM.render(reactScriptElement, document.getElementById('button'));

但是，该脚本不是由浏览器运行的。然而，以 native 方式执行它，似乎确实可以运行它:

var script = document.createElement('script');
script.src = "./d.js";
var div = document.getElementById('button');
div.appendChild(script);

那么，这是设计上的错误，还是我做错了什么？

编辑:这不是重复的。这里的问题是两者之间的差异，以及为什么它们的行为不一样。

Answer 1

区别在于，react 版本永远不会插入到真实的浏览器 DOM 中，而所谓的 React vdom 的浅拷贝确实会进入 DOM，原始行为不会被使用，因为它是对另一个地方的脚本的引用在 realDOM 中，dom 不知道这个引用的副本已被插入，因为它只知道未插入的原始引用 dom 节点。

详细说明发生情况的小演示，请注意，当在单个页面上使用此代码时，需要使用脚本结束标记的转义版本来防止浏览器解析错误

<div id="root"></div>
<script>
const el = document.getElementById('root')
const script =`<script src=d.js></${'script'}>`
console.log(script)
el.innerHTML= script
</script>

当我用标签设置innerHTML时，它在插入到dom中时不会被执行。当脚本位于额外文件中而不是脚本标记时，它可以使用 innerHTML = '<script src=d.js></script>'并且由于用于在对象上设置它的插入方法innerHTML，仍然不会被dom执行。

脚本在插入脚本上执行，在没有 dom API 的情况下直接设置 dom 时，不会检测到插入脚本插入。这就是 dom 解析器的工作原理。