React 入门第五步：组件布局小案例

我们结合前面学习的内容，做一个界面布局的小案例，案例最终呈现的效果如下：

基本布局

CSS 样式已经提前写好了，放在根路径下，起名为 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; 
} 

我们创建好对应的子组件，分别为 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 

 然后在子组件中，分别写好初始代码，因为已经有了对应的样式代码，因此在子组件中直接使用即可：

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

 基础代码实现之后，我们就能看到对应的效果了。但是，按照正常的编码逻辑，header 和 footer 应该属于公共部分，中间部分无论展示什么内容，头和尾都是需要展示的。

集成公共组件

我们需要将 Header 和 Footer 作为公共组件使用，需要添加一个src\Components\Layout.js 组件，Layout 组件的作用就是将 header与 footer 显示出来，同时把中间的 main 内容空出来，将来我们传入什么样的 JSX ，那么 main 里就显示什么样的 DOM。

在 Layout.js 中，引入 Header 与 Footer 组件并应用在 JSX 中，然后利用 JSX 传参，展示主体内容。前面我们已经学习过，这里使用的是函数组件，只需要在函数中使用形参获取 Props ，然后在展示主体内容的地方获取 {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