Javascript 在React中出现在侧边栏顶部的组件

我想使用React Router和Redux创建一个带有登录页的登录应用程序。我希望登录页有一个边栏，它总是出现在应用程序内部的以下组件中，为此，我已将边栏组件分配给一个始终出现在url上的路由。我做过这样的事情：

import Layout from './Layout'

export default function Dashboard() {
    return (
        <Layout>
            <div style={{marginLeft: 75}}>
                Hola
            </div>
        </Layout>
    )
}

index.js

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
          <App/>
      </Router>
  </Provider>,
  document.getElementById('root')
);

.sidebar {
    position: fixed;
    /* Fixed Sidebar (stay in place on scroll and position relative to viewport) */
    height: 100%;
    width: 75px;
    /* Set the width of the sidebar */
    z-index: 1;
    /* Stay on top of everything */
    top: 3.4em;
    /* Stay at the top */
    background-color: #222;
    /* Black */
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 10px;
}

仪表板

export default function Dashboard() {
    return (
        <Fragment>
            Hola
        </Fragment>
    )
}

导出默认功能仪表板（）{
返回(
赫拉
)
}

我使用Sidebar.css使侧边栏粘贴到屏幕的左侧，这工作正常，问题是仪表板组件，这显示在屏幕顶部，如下所示：

---

如何解决这个问题，并使我将添加到应用程序中的所有组件调整其大小，使导航栏始终显示在左侧？

顶部属性影响从顶部边缘开始的垂直位置

这里添加3.4em，因此存在间隙，如果不需要顶部间距，请将其设置为0

.sidebar {
    ...other stuff
    top: 0;
}

由于这是固定的，它将位于其他ui之上， 因此，对于仪表板，您需要设置左边距：75px（或侧边栏的宽度）

导出默认功能仪表板（）{
返回(
赫拉
)
}

顶部属性影响从顶部边缘开始的垂直位置

这里添加3.4em，因此存在间隙，如果不需要顶部间距，请将其设置为0

.sidebar {
    ...other stuff
    top: 0;
}

由于这是固定的，它将位于其他ui之上， 因此，对于仪表板，您需要设置左边距：75px（或侧边栏的宽度）

导出默认功能仪表板（）{
返回(
赫拉
)
}

@Avinash的回答应该可以帮助您解决css样式问题

此外，我认为使用布局和儿童道具是一种更好的方式来实现您想要实现的目标，即使

侧栏

出现在每个组件中

您可以通过创建

布局

组件并将

侧栏

导入其中来实现这一点。然后，每个有侧边栏的组件都应该简单地利用这个布局

Layout.js

import Sidebar from './Sidebar'

export default function Layout(props) {
    const { children } = props
    return (
        <div>
            <Sidebar />
            {children}
        </div>
    )
}

---

这样，您就不需要这个额外的路径：

@Avinash的答案应该可以帮助您解决css样式问题

此外，我认为使用布局和儿童道具是一种更好的方式来实现您想要实现的目标，即使
侧栏
出现在每个组件中

您可以通过创建
布局
组件并将
侧栏
导入其中来实现这一点。然后，每个有侧边栏的组件都应该简单地利用这个布局

Layout.js

import Sidebar from './Sidebar'

export default function Layout(props) {
    const { children } = props
    return (
        <div>
            <Sidebar />
            {children}
        </div>
    )
}

这样，您就不需要这个额外的路径：
有没有办法让布局组件中的子级始终保持左侧75像素的边距？这是一个很好的方法，问题是每当我渲染一个具有侧边栏的新组件时，组件侧边栏都会再次渲染，例如，如果我必须在侧边栏组件中调用API，这将在我每次使用侧边栏调用组件时进行调用，并且可能会影响应用程序的性能。我认为，您的第一条评论是肯定的，因此，与其使用
div
和marginLeft包装
Dashboard
，您可以使用该marginLeft div将
子属性
包装在
布局
中。这样，任何使用
布局的组件都将始终具有该边距left。是否有办法使布局组件中的子组件始终具有左侧75像素的边距？这是一种很好的方法，问题是每当我渲染具有边栏的新组件时，组件边栏将再次渲染，例如，如果我必须在侧边栏组件中调用API，这将在我每次使用侧边栏调用组件时进行调用，并且可能会影响应用程序的性能。我认为，您的第一条评论是肯定的，因此，与其使用
div
和marginLeft包装
Dashboard
，您可以使用该marginLeft div将
子属性
包装在
布局
中。这样，任何使用
布局的组件都将始终具有该marginLeft。
import Layout from './Layout'

export default function Dashboard() {
    return (
        <Layout>
            <div style={{marginLeft: 75}}>
                Hola
            </div>
        </Layout>
    )
}