Css 如何布局反应组件？_Css_Reactjs

Css 如何布局反应组件？

css reactjs

Css 如何布局反应组件？,css,reactjs,Css,Reactjs,我是一个反应js的初学者。如何为我的组件创建布局？在my app.js中有四个组件，例如 const app = ()=>{ return( <div> <Header/> <SideBar/> <BodyPart/> <Footer/> </div>) } const-app=（）=>{ 返回( ) } 在我的头组件中 const Header=()=>{ return<div>Header&

我是一个反应js的初学者。如何为我的组件创建布局？在my app.js中有四个组件，例如

const app = ()=>{
return(
<div>
<Header/>
<SideBar/>
<BodyPart/>
<Footer/>
</div>)
}

const-app=（）=>{
返回(
)
}

在我的头组件中

const Header=()=>{
return<div>Header</div>}

const头=（）=>{
returnHeader}

同样地

const Footer=()=>{
return<div>Footer</div>}

constfooter=（）=>{
returnFooter}

const BodyPart=（）=>{
returnBodyPart}

const侧边栏=（）=>{
returnSidebar}

如何按照图中所示布局它们

我不想使用任何库。我想在CSS中实现它。

以下是您试图实现的目标的修订版本：

应用程序组件

从导入标题。。。
从导入页面。。。
常量应用=（）=>{
返回(
)
}

标题组件

const头=（）=>{
returnHeader}

页面组件

从导入侧栏。。。
从…导入主。。。
常量页=（）=>{
返回(
)
}

边栏组件

const侧边栏=（）=>{
返回侧边栏
}

主要成分

从导入正文。。。
从导入页脚。。。
常量Main=（）=>{
返回(
)
}

身体成分

const Body=（）=>{
returnBodyPart}

页脚组件

constfooter=（）=>{
returnFooter}

我希望这将帮助您组织组件层次结构。如果您现在想为组件设置样式，可以通过以下类来实现：

appcontainer

、

page container

、

main container

，或者通过标记名：

header

、

aside

、

footer

、

main

等。我认为您必须创建两个组件：header和main。在主组件中，您创建了3个子组件：侧边栏、主体和页脚。您可以使用CSS创建两列：一列为wtih侧边栏，另一列为带正文和页脚的列！展示你尝试过的款式？基本上，您需要的只是简单的CSS，与您使用简单的HTML所做的相同，您可以将

，

放在一行中，并将

放在

浮动element@kunquan现在我只想创建布局。@cadenzah我如何为组件设计样式？我可以像这样把类名添加到组件中吗？谢谢，伙计。这让我明白了很多。现在我可以组织我的组件了。
const BodyPart=()=>{
return<div>BodyPart</div>}

const SideBar=()=>{
return<div>Sidebar</div>}

import Header from ...
import Page from ...

const app = ()=>{
  return(
    <div className="app-container">
      <Header />
      <Page />
    </div>
  )
}

const Header=()=>{
return<header>Header</header>}

import Sidebar from ...
import Main from ...

const Page=()=>{
  return(
    <div className="page-container">
      <Sidebar />
      <Main />
    </div>
  )
}

const SideBar=()=>{
    return<aside>Sidebar</aside>
}

import Body from ...
import Footer from ...

const Main =()=>{
  return(
    <div className="main-container">
      <Body />
      <Footer />
    </div>
  )
}

const Body =()=>{
return<main>BodyPart</main>}

const Footer =()=>{
return<footer>Footer</footer>}