React 根 dom 节点使用什么 html 元素?

Nat*_*all 4 html javascript reactjs

我想使用语义 html 创建一个应用程序。该应用程序将具有标题、导航、主要区域、页脚和侧栏。

该应用程序使用react,因此有一个index.js和index.html。这是 React 将元素渲染到根 DOM 节点的地方。

索引.js

 render(<App />, document.getElementById('root'))
Run Code Online (Sandbox Code Playgroud)

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Title</title>
  </head>
  <body>
    //<div id="root"></div>
    // <main id="root"></main>
    // <section id="root"></section>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

我希望该应用程序能够生成类似以下内容的内容:

<some root node>
    <header>
    <nav>
    <main>
    <aside>
    <footer>
Run Code Online (Sandbox Code Playgroud)

由于 React 需要根节点,那么它应该是什么元素类型(语义上最正确的元素类型是什么)?根节点位于index.html内部,因此片段无法解决问题。我在index.html 中注释掉了一些想法,即div、main 和section。

小智 6

<main>应该与内容的主要部分相关。<main>如果您希望拥有导航、标题和/或侧边栏以及类似的东西,那么为应用程序使用 div 并为页面上的主要内容使用标签似乎更合适。