Как компоновать компоненты React?

#css #reactjs

Вопрос:

Я новичок в react js. Как я могу создать макет для своих компонентов? В моем app.js есть четыре компонента , такие как

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

В моем компоненте заголовка

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

Аналогично ,

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

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

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

Как я могу расположить их так, как показано на рисунке ?.

Я не хочу использовать какие-либо библиотеки. Я хочу сделать это в CSS.

1. Я бы сказал, что вам нужно создать два компонента: заголовок и основной. И в главном компоненте вы создаете 3 дочерних компонента: боковую панель, основной текст и нижний колонтитул. И вы используете CSS для создания двух столбцов: 1 с боковой панелью и 1 с телом и нижним колонтитулом!

2. Покажите, какой стиль вы пробовали? По сути, вам нужен простой CSS, то же самое, что вы делали с обычным HTML

3. Может быть, вы можете поместить <Header> , <BodyPart> , <Footer> в строку и поместить <Sidebar> как float элемент

4. @kunquan На данный момент я хочу только создать макет.

5. @cadenzah как я могу стилизовать компонент? Могу ли я добавить classname в component как <Заголовок Classname=»заголовок»/> вот так?

Ответ №1:

вот пересмотренная версия того, чего вы пытаетесь достичь:

Компонент приложения

 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>}

Я надеюсь, что это поможет вам организовать иерархию ваших компонентов. И если вы теперь хотите стилизовать свои компоненты, вы можете сделать это, ориентируясь на классы: app-container , page-container , main-container или по имени тега: header , aside footer , main и т.д.