Question

我正在尝试使用ReactJS，我理解运行ReactJS直接修改body标签的含义，它可以被其他应用程序覆盖，并导致奇怪的错误。因此，将它放入div。

是一种很好的做法

https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375

不渲染到正文

那么我想告诉你的另一个错误是什么   关于？它更简单：不要渲染到document.body。许多   反应的例子可以做到这一点，因为它打字更少，看起来更清晰。   别。做。这个。

React希望在其下完全管理DOM树   控制。如果你在由托管的DOM树中追加一些外来的东西   反应，它可能会严重吓坏，除非你非常小心   （例如，在返回了shouldComponentUpdate的叶子组件内部   假）。

有什么问题？每个人都更新它！一些   人们有非React代码将模态附加到它。谷歌字体   Loader会愉快地将元素放入体内，只需要一小部分   第二，如果它尝试，你的应用程序将破坏可怕和莫名其妙   在此期间更新顶级内容。你真的   知道你的第三方脚本在做什么吗？广告或广告怎么样？   社交网络SDK？

最后，考虑一下你没有的东西   控制：浏览器插件。是的，他们可以注入东西。   当然，他们也可以搞乱其余的DOM，但至少   你可以解决最普遍的情况。

那你做什么？总是放一个   root into，给它一个ID并呈现它。另一个   这样做的好处是你可以把你的脚本放在底部   之前你不需要等待DOMContentLoaded   渲染。

但是我想知道我是否做了这样的事情：

ReactDOM.render(
   <div id="my-app" />,
   document.getElementsByTagName("body")[0]
);

ReactDOM.render(
   <App />,
   document.getElementById('my-app')
);

到<body/>而不是

ReactDOM.render(
    <App />,
    document.getElementById('my-app')
);

进入<body><div id="my-app" /></body>

这种方法是否与

有同样的问题

ReactDOM.render(
    <App />,
    document.getElementsByTagName("body")[0]
);

进入<body />

谢谢

Answer 1

据我所知，如果该代码创建了无法调试的奇怪错误，则该代码编写不正确。

在某些情况下（特别是在FLUX中），您将事件发送到尚未安装的组件，并且它不会给出任何错误。

Answer 2

你可以在下面做。无论如何都不需要渲染身体标签。

<body>
  <div id="root"></div>
  <script type="text/javascript" src="/js/bundle.min.js" charset="utf-8"></script>
</body>

React代码看起来像这样

const app = document.getElementById("root");
ReactDOM.render(<Layout/>, app);

通过动态创建主体来实现ReactJS

2 个答案: