做一个 React 组件布局小案例

勾崽
2,748 阅读4分钟

组件布局小案例

结合之前写的内容（有兴趣的铁铁看主页往前翻），做一个界面布局的小案例，案例最终呈现的效果如下：

基本布局

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

公共组件完成后，我们想展示那个主体组件的内容，就在那个组件中引入 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

总的来说，就是利用了 向组件传递 JSX 的特性实现的。

总结

最后，做个小总结，从接触组件这个概念，到组件间的传递，我们学习了很多内容，也深刻的体会了 JSX 就是 JS 这个概念，而在组件间数据传递部分，Props 是核心关键点，但是，你可能还不知道，Props 有一个非常重要的特性：只读。意思就是我们在组件中获取到的 Props 数据，你只能用，而不能改。

官方手册的原话是：

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。

……

React 非常灵活，但它也有一个严格的规则：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

这里提到了一个 函数式编程 中的 纯函数 概念，我简单解释一下什么是纯函数：“ 函数不会在函数体中修改入参，且在多次调用下，相同的入参始终返回相同的结果。”

其实，从这里可以看出，React 团队希望组件本身是具有纯函数特性的，因此，Props 就需要设置为只读的，不能在组件中被修改。

但是问题是，我们界面展示的内容是需要根据数据改变而改变的，而 React 设计的核心理念中有非常重要的一点就是 数据驱动 UI，看到这里，你一定会觉得 React 在自相矛盾，一边传入的 Props 数据是只读不可改变的，一边又依靠数据的改变而驱动 DOM 的改变。

真的是这样吗？当然不是，数据驱动UI 中的 数据 另有其人，它称之为 “state”，也叫 状态，作用就是在不违反上述规则的情况下，state 允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出的内容。

下篇写 组件状态，上班打工了。

avatar
文章
阅读
粉丝