ReactJS - 创建脚本元素答案

【问题标题】：ReactJS - create script elementReactJS - 创建脚本元素
【发布时间】：2017-04-20 18:05:16
【问题描述】：

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

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

但是，该脚本不是由浏览器运行的。但是，以本机方式执行它似乎可以运行它：

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

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

编辑：这不是重复的。这里的问题是两者之间的区别，为什么它们的行为不一样。

【问题讨论】：

Adding script tag to React/JSX的可能重复
绝对不是。这里的问题是两者之间的区别，为什么它们的行为不一样。

标签： javascript reactjs code-injection

【解决方案1】：

无法确认这一点，但我认为您需要传递一个 React 组件而不是 react 元素。这就是为什么它不起作用。

class reactScriptElement extends React.Component {
  ...
  componentWillMount() {
    const script = document.createElement("script");
    script.src = "d.js";
    document.body.appendChild(script);
  }
  ...
}

ReactDOM.render(reactScriptElement, document.getElementById('button'));

通常 React.createElement 用于从 react 组件的 render() 方法返回。您创建元素的方式不起作用，因为您传递的是元素而不是组件。

React.createElement()的正确用法-

class App extends React.Component {
  ...
  render() {
    return React.createElement(MyLabel, {label: "Here is the label prop"},
      React.createElement("div", {},
        React.createElement("input", {type: "text", value: "And here is a child"})
      )
    );
  }
};

【讨论】：

不，渲染方法接受一个元素，而不是一个组件。不要与 JSX 语法混淆，因为我使用的是 vanila JS。
@DanielRahamim 好的。希望你能找到答案。祝你好运！

【解决方案2】：

不同之处在于，react 版本永远不会插入到真正的浏览器 DOM Ast 中，所谓的 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>' 并且仍然不会被 dom 执行，因为用于在对象上设置它的插入方法 innerHTML。

scripts get execution on insert 直接设置没有 dom API 的 dom 时，不会检测到插入脚本。这就是 dom 解析器的工作原理。

【讨论】：