// components/Layout/Layout.tsx
const Layout = () => {
  return (
    <div>

    </div>
  )
}

export default Layout

// components/Layout/Header/Header.tsx
const Header = () => {
  return (
    <header>
      <h2>This is Header</h2>
    </header>
  )
}

export default Header

// components/Layout/Footer/Footer.tsx
const Footer = () => {
  return (
    <footer>
      <h2>This is Footer</h2>
    </footer>
  )
}

export default Footer

// pages/index.tsx
import Layout from "../components/Layout/Layout"
import HomeContainer from "../containers/Home/HomeContainer"

const HomePage = () => {
  return (
    <Layout>
      <HomeContainer />
    </Layout>
  )
}

export default HomePage

我正在用React制作一个简单的网页。这一次，我试着用HTML结构来写，但我有一个很难的问题。

如何通过创建布局组件并使用路由对其进行包装来实现在呈现页面时不应有其他页眉或页脚的页面？

※附加问题：是否可以通过在布局组件中使用UseMediaQuery来创建移动响应式Web？

顺晟科技：

您需要呈现div中的子元素。Layout组件语法如下：

// components/Layout/Layout.tsx
const Layout = ({children}) => {
  return (
    <div>
      {children}
    </div>
  )
}

export default Layout;

使用布局组件

const AnyPage = () => {
  return (
    <Layout>
      \* Children written here will render inside your div of Layout component *\
    </Layout>
  )
}

export default AnyPage;

主页如下所示

// pages/index.tsx
import Layout from "../components/Layout/Layout"
//import Header and Footer here

const HomePage = () => {
  return (
    <Layout>
      <Header />
      {Additional components or HTML code here}
      <Footer />
    </Layout>
  )
}

export default HomePage;

※补充：是的，您可以为Layout组件的div添加一个CSS类，以使其具有响应性。

// components/Layout/Layout.tsx

//import style sheet here

const Layout = ({children}) => {
  return (
    <div className="class-to-make-responsive">
      {children}
    </div>
  )
}

export default Layout;

您需要在布局组件中渲染子道具。

const Layout = (props) => {
  return (
    <div>
      <header>Header</header>
      { props.children }
      <footer>Footer</footer>
    </div>
  )
}