Question

我需要将我的反应应用程序组件作为第一个孩子直接附加到身体上。我的解决方案是这样的（但在我看来像矫枉过正）：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

const $container = document.createElement('div');
document.body.insertBefore($container, document.body.firstChild)

ReactDOM.render(<App />, $container);

采取这种行动的反应方式是什么？

谢谢！

Answer 1

如果您的目标是将 <App /> 组件作为文档正文中的第一个元素插入，您可以删除设置 $container 变量的两行并将其附加到最后一行，使用 document.body 作为您的第二个参数，如下所示：

ReactDOM.render(<App />, document.body);

根据您的代码片段，您似乎还需要一个包装器 div，在这种情况下，您可以在 ./components/App.js

编辑：我还应该提到， react-dom 的创建者不鼓励直接附加到 body。如果您这样做，您将收到控制台警告。

Answer 2

在我看来，你的身体可以让第一个孩子为反叛者追加。

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

你可以照常编写 index.js 。

ReactDOM.render(<App />, document.getElementById('root'));

以正确的方式将反应应用程序直接附加到正文

2 个答案: