logo标签列表

用于React根DOM节点的HTML元素是什么？

javascripthtmlreactjs
4

我希望使用语义化的HTML创建一个应用程序。该应用将包括标题、导航、主要区域、页脚和侧边栏。

该应用使用React，因此有index.js和index.html文件。在这里，React将元素渲染到根DOM节点中。

index.js

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

index.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>

我期望应用程序能够生成类似于以下内容：
<some root node>
    <header>
    <nav>
    <main>
    <aside>
    <footer>

由于React需要一个根节点，那么应该使用什么元素类型作为根节点（最符合语义的是什么）？根节点位于index.html中，因此片段不能解决问题。在index.html中，我已经注释了一些想法，包括div、main和section。

在他们的网站上，他们使用<div>，所以我建议你也使用它。 - Luca Kiebel
也许是 <main></main>？https://www.w3schools.com/tags/tag_main.asp - Unixmonkey
3
@Unixmonkey 建议将主要内容与侧边栏、导航等重复的内容分开，使用传统的 <div /> 标签作为根节点。这样可以使页面更清晰易懂。 - Turtlefight
@Turtlefight 同意。谢谢！ - Nathan Hall
4个回答
6

<main>应该与主体内容有关。 如果您希望设置导航、页眉和/或侧栏等组件，使用 div 作为 App 并在页面上使用 <main> 标签进行主要内容设置似乎更合适。

很棒的答案！谢谢你。 - Nathan Hall
3

这并没有什么区别，但官方文档使用了一个<div>标签。

0

如果您喜欢，也可以使用document.body。如果页面中只有单页应用程序，则没有特定的相关性。

0

您可以使用 main 标签作为根标签，然后使用 section 标签来表示各个部分。

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接