Question

当我在App.js中调用我的SideBar组件时，它出现在所有内容的顶部，并且主页在其下，并且我理解为什么这样做，但是我不知道如何获取它，以致于边栏显示为在屏幕左侧，紧随其后的是主应用程序组件。

这是我的代码：

const AppRoute=({component:Component, layout:Layout,...rest}) => {
  <Route {...rest} render = {props=> (
    <Layout>
      <Component {...props}/>
    </Layout>
  )}/>
)

const MainLayout = props =>(
 <div>
   <SideBar/>
   {props.children}
 <div>

class App extends Component {

  render() {

    return(
      <BrowswerRouter>
        <div>
          <Switch>
            <AppRoute path = "/dashboard" layout={MainLayout} component={Dashboard}/>
          </Switch>
        </div>
      </BrowserRouter>

    )
  }
}

非常感谢您的帮助！

Answer 1

const MainLayout = props =>(
 <div style={{display: 'flex'}}>
   <SideBar style={{flex: '1 auto'}} />  
   {props.children}
 <div>

尝试这个

您还可以在侧边栏和主要内容元素上应用float：，使侧边栏具有固定的宽度

或者您可以尝试使用CSS网格：

const MainLayout = props =>(
 <div style={{display: 'grid', gridTemplateColumns: '200px auto'}}>
   <SideBar />  
   {props.children}
 <div>

reactjs使内容显示在侧边栏旁边

1 个答案: