我們結(jié)合前面學(xué)習(xí)的內(nèi)容，做一個界面布局的小案例，案例最終呈現(xiàn)的效果如下：

基本布局

CSS 樣式已經(jīng)提前寫好了，放在根路徑下，起名為 style.css，具體代碼如下：

html, body { height: 100%; } 
 
body { margin: 0; padding: 0; } 
 
.header, .footer { 
  width: 100%; height: 80px; position: absolute; left: 0; 
  line-height: 80px; text-align: center; font-size: 18px; 
  color: #fff; 
} 
 
.header { background-color: skyblue; top: 0; } 
 
.footer { background-color: purple; bottom: 0; } 
 
.main { 
  width: 100%; position: absolute; top: 80px; bottom: 80px; 
  padding: 20px 0; text-align: center; background: khaki; 
} 

我們創(chuàng)建好對應(yīng)的子組件，分別為 src\Components\Header.js、src\Components\Home.js、src\Components\Footer.js。

在 \src\App.js 中引入上面的三個子組件及樣式文件：

import React, { Component } from 'react' 
 
import Header from './Components/Header' 
import Home from './Components/Home' 
import Footer from './Components/Footer' 
 
import './style.css' 
 
export class App extends Component { 
  render() { 
    return ( 
      <> 
        <Header></Header> 
        <Home></Home> 
        <Footer></Footer> 
      </> 
    ) 
  } 
} 
 
export default App 

 然后在子組件中，分別寫好初始代碼，因為已經(jīng)有了對應(yīng)的樣式代碼，因此在子組件中直接使用即可：

// src\Components\Header.js   
import React from 'react' 
 
function Header() { 
  return ( 
    <> 
      <div className={'header'}> 
        Header 
      </div> 
    </> 
  ) 
} 
 
export default Header 
 
// ================================================= 
// src\Components\Home.js  
import React from 'react' 
 
function Home() { 
  return ( 
    <> 
      <div className={'main'}> 
        Home 
      </div> 
    </> 
  ) 
} 
 
export default Home 
 
// ================================================= 
// src\Components\Footer.js 
import React from 'react' 
 
function Footer() { 
  return ( 
    <> 
    <div className={'footer'}> 
        Footer 
      </div> 
    </> 
  ) 
} 
 
export default Footer 

 基礎(chǔ)代碼實現(xiàn)之后，我們就能看到對應(yīng)的效果了。但是，按照正常的編碼邏輯，header 和 footer 應(yīng)該屬于公共部分，中間部分無論展示什么內(nèi)容，頭和尾都是需要展示的。

集成公共組件

我們需要將 Header 和 Footer 作為公共組件使用，需要添加一個src\Components\Layout.js 組件，Layout 組件的作用就是將 header與 footer 顯示出來，同時把中間的 main 內(nèi)容空出來，將來我們傳入什么樣的 JSX ，那么 main 里就顯示什么樣的 DOM。

在 Layout.js 中，引入 Header 與 Footer 組件并應(yīng)用在 JSX 中，然后利用 JSX 傳參，展示主體內(nèi)容。前面我們已經(jīng)學(xué)習(xí)過，這里使用的是函數(shù)組件，只需要在函數(shù)中使用形參獲取 Props ，然后在展示主體內(nèi)容的地方獲取 {props.children} 就可以了：

import React from 'react' 
import Header from './Header' 
import Footer from './Footer' 
 
function Layout(props) { 
  return ( 
    <> 
      <Header /> 
      <div className="main"> 
        {props.children} 
      </div> 
      <Footer /> 
    </> 
  ) 
} 
 
export default Layout