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.jsimport 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

公共组件完成后，我们想展示那个主体组件的内容，就在那个组件中引入 Layout ，然后将主体内容以传递 jsx 的方式传入就可以了，最后再在 App 中，引入主体组件进行展示，具体代码如下：

// Home.js import React from 'react'import Layout from './Layout'
function Home() {  return (    <Layout>      <div>Home</div>    </Layout>  )}
export default Home
// ====================================// List.js import React from 'react'import Layout from './Layout'
function List() {  return (    <Layout>      <div className="main">        list      </div>    </Layout>  )}
export default List
// ====================================// App.js import React, { Component } from 'react'import Home from './Components/Home'import List from './Components/List'
import './style.css'
export class App extends Component {  render() {    return (      <>        <Home />        <List />      </>    )  }}
export default App