我应该在 App.js 中包含哪些组件？

Posted 2023-02-23

【中文标题】我应该在 App.js 中包含哪些组件？

【英文标题】：Which components should I have inside App.js?

【发布时间】：2021-07-06 07:03:35

【问题描述】：

我最近学习了react，不知道下面的代码示例是不是一个好习惯？

我将Header 中的导航栏等包裹在<header> 标记中，将Main 包裹在<main> 标记中等等。这是应该怎么做的吗？

export const App = () => 
    return (
        <div>
            <Header />
            <Main />
            <Footer />
        </div>
    )

【参考方案1】：

这取决于您的项目，可能是某些组件，您不需要页眉或页脚。 所以你最，把页眉和页脚放在主要里面

【参考方案2】：

如果你只有一个页面，这是一个好的开始，否则你必须使用 react-router-dom 并调整你的组件：页眉和页脚不会改变，只是“主要”部分......

同样在你的例子中，删除第一个 div，它没用：

export const App = () => 
  return (
    <>
      <Header />
      <Main />
      <Footer />
    </>
  )

或

export const App = () => 
  return (
    <React.Fragment>
      <Header />
      <Main />
      <Footer />
    </React.Fragment>
  )

如果您想查看 react-router-dom 的示例：Demo

【参考方案3】：

您的问题可能是指 html 结构的语义

一旦 React 结构已经包含 body，这个 div 就不需要作为语义元素了。您可以通过替换为 Fragment

来删除它

export const App = () => 
  return (
    <>
      <Header />
      <Main />
      <Footer />
    </>
  )

如果您有兴趣，可以阅读更多关于 HTML 语义的内容：https://developer.mozilla.org/docs/Glossary/Semantics