使用ReactDOM后JavaScript代码不起作用

Question

我在新项目中使用了react.js，发现当我使用ReactDOM渲染从React.Component扩展的类时，javascript不起作用

当最后使用触发fire（）方法的脚本不起作用。 当我更改脚本顺序时，它们会起作用。

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

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script>
class HelloReact extends React.Component {
  render() {
    return React.createElement("div", null, React.createElement("h1", null, "Hello world 1!"));
  }
} 

ReactDOM.render(React.createElement(HelloReact, null), document.getElementById("hello"));
ReactDOM.render(React.createElement("h1", null, "Hello, world 2!"), document.getElementById('root'));
</script>
<script>alert("Hello");</script>

我会知道这是正常现象（并且我不应该在带有React代码的脚本之后使用javascript代码）还是React库中存在错误？

我正在检入开发工具，但未发现任何错误。我将文件添加到github [https://github.com/darekjk/reactjs_examples/tree/master/react-js-problem-20181231]中，以确保在复制/粘贴过程中没有出现任何错误。

Answer 1

如果您看到javascript根本没有执行，则说明您有99％之前发生过javascript错误。

有趣的是，您的代码确实在我的本地计算机和JsFiddle上运行。

但是，如果在您的特定情况下仍然存在问题，请先打开Chrome开发工具（F12），然后在控制台中查看是否有JavaScript错误。

Answer 2

哦，我在这里发现了实际的错误，这很有趣。

看看这一行：<div id="hello"><div>。

您本打算写<div id="hello"></div>，但错过了斜线。

这意味着您在该行之后的所有标记都在 hello div中（以及其他未命名的div，它应该是结束标记）在内部中。您可以在 Chrome开发工具的元素视图中进行检查。

这意味着，当ReactDOM将您的类呈现到hello div中时，它会覆盖所有内容，因为所有内容都在 hello div 内部，包括本身以及其他脚本标签。在上面的屏幕截图中，您可以看到所有脚本标记都丢失了。