这个布局如何进行？

Question

我是 React 新手，在定位组件方面遇到问题。我已附上所需布局的图像。 ，并且侧面对于所有页面都是通用的。我该如何进行此布局？我应该使用网格吗？

我尝试使用侧边 div 作为单独的组件，但 div 的内容针对每个页面都会发生变化，并且我不确定如何相对于当前页面更新其内容。

Answer 1

我给你的通用代码首先使用应用程序中的布局，然后使用 CSS。您也可以使用 bootstrap、tailwind 或其他样式框架来布局模板，并使用路由器来使用此模板..

.container {
  display: grid;
  grid-template-columns: 1fr 200px; /* Adjust 200px to your desired sidebar width */
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

.navbar {
  grid-column: 1 / 3; /* Spanning full width */
  background-color: #eee;
}

.body {
  grid-column: 1;
  background-color: #ddd;
}

.footer {
  grid-column: 1;
  background-color: #ccc;
}

.sidebar {
  grid-column: 2;
  grid-row: 1 / 4; /* Spanning from top to bottom */
  background-color: #bbb;
}

import React from 'react';
import './Layout.css'; // Assuming you saved the CSS in a file named Layout.css

const Layout = () => {
  return (
    <div className="container">
      <div className="navbar">Navbar</div>
      <div className="body">Body</div>
      <div className="footer">Footer</div>
      <div className="sidebar">Sidebar</div>
    </div>
  );
}

export default Layout;