重复代码是混乱的根源！，本篇文章我们来继续消灭重复代码。

目标

细心的同学应该能发现：每一个Page组件（/src/pages下的组件）的render方法都拥有相似的jsx结构，比如：

render () {return (<div><header><h1>...</h1></header><main>...</main></div>);
}

每一个页面都包含一个页面的标题（header标签和h1标签），并且页面的主要部分都被放在了一个main标签中。

现在很多网站的设计都是如此：大部分页面都有相似的header和footer，不同的是中间部分的内容。

既然是这些部分都是相似的，那么在每一个地方都重复写一遍就显得太没水平了，stupid！

怎么用一份代码来渲染这些相同的地方，并且也能够满足不同的页面之间一些差异化的配置呢（如本文中各页面标题不同）？

传统的MVC Web应用可以通过模板引擎的模板页（layout）来达到这样的效果。

使用React，我们可以使用布局组件来解决这个问题。

布局组件

新建/src/layouts目录用来存放布局组件，新建HomeLayout.js文件：

/*** 布局组件*/
import React from 'react';class HomeLayout extends React.Component {render() {// 父组件传递的值const { title, children } = this.props;return (<div><header><h1>{title}</h1></header><main>{children}</main></div>);}
}export default HomeLayout;

我们把每个页面中通用的部分提取到了HomeLayout组件中，在HomeLayout中使用props.title来维护页面的标题文本。

使用props.children来渲染每个页面特有的内容部分。

现在我们可以这样来渲染HomePage：

<HomeLayout title="Welcome"><Link to="/user/list">用户列表</Link><br/><Link to="/user/add">添加用户</Link>
</HomeLayout>

HomeLayout里面的内容会作为HomeLayout的props.children渲染到最终的页面上。

重构页面组件

主页

...
import HomeLayout from '../layouts/HomeLayout';class Home extends React.Component {render () {return (<HomeLayout title="Welcome"><Link to="/user/list">用户列表</Link><br/><Link to="/user/add">添加用户</Link></HomeLayout>);}
}
...

用户添加页面

...
import HomeLayout from '../layouts/HomeLayout';class UserAdd extends React.Component {handleSubmit (e) { ... }render () {...return (<HomeLayout title="添加用户"><form onSubmit={(e) => this.handleSubmit(e)}>...</form></HomeLayout>);}
}
...

用户列表页面

...
import HomeLayout from '../layouts/HomeLayout';class UserList extends React.Component {constructor (props) { ... }componentWillMount () { ... }render () {...return (<HomeLayout title="用户列表"><table>...</table></HomeLayout>);}
}
...

总结

现在我们已经把3个页面组件的重复部分使用HomeLayout来替代了，是不是觉得代码又变得干净了很多呢？

转载于:https://www.cnblogs.com/crazycode2/p/8532916.html

react 项目实战（六）提取布局组件相关推荐

SpringBoot+MyBatis+MYSQL项目实战六（新增收货地址）
SpringBoot+MyBatis+MYSQL项目实战六(新增收货地址) 项目源码地址:电脑商城实战点击新增收货地址一:新增收货地址--数据表的创建 CREATE TABLE t_address ...
miniFTP项目实战六
项目简介: 在Linux环境下用C语言开发的Vsftpd的简化版本,拥有部分Vsftpd功能和相同的FTP协议,系统的主要架构采用多进程模型,每当有一个新的客户连接到达,主进程就会派生出一个ftp服务 ...
react项目实战-好客租房
一.项目介绍好客租房-移动Web端项目介绍:本项目是一个在线租房项目,实现了类似链家等项目的功能,解决了用户租房的需求核心业务:在线找房(地图,条件搜索),用户登录,房源发布技术栈 React ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
【Flutter实战】六大布局组件及半圆菜单案例
老孟导读:Flutter中布局组件有水平 / 垂直布局组件( Row 和 Column ).叠加布局组件( Stack 和 IndexedStack ).流式布局组件( Wrap )和自定义布局组件 ...
umi搭建react+antd项目（六）父子组件通讯
上一篇写了一个子组件,只是把值传入进来,这篇讲解在子组件修改父组件的数据 1.在index.js里,新增方法:updateImg 用于修改list集合 updateImg() {this.setSta ...
React项目实战之租房app项目（四）长列表性能优化城市选择模块渲染列表
前言目录前言一.长列表性能优化 1.1 概述 1.2 懒渲染 1.3 可视区渲染(React-virtualized) 二.react-virtualized组件 2.1 概述 2.2 基本使用 ...
React项目实战之租房app项目（二）首页模块
前言目录前言一.首页路由处理二.轮播图 2.1 轮播图效果图 2.2 拷贝轮播图组件代码 2.3 轮播图代码详解 2.4 轮播图代码重构 2.5 解决轮播图出现的BUG 三.导航菜单 3.1 ...
React项目实战之租房app项目（十）个人中心模块登录访问控制项目打包部署上线
前言目录前言一.个人中心模块 1.1 个人中心模块效果图 1.2 个人中心模块基础布局 1.2 个人中心模块功能实现 1.2.1 判断用户是否登陆 1.2.2 退出功能二.登录访问控制 2.1 ...

react 项目实战（六）提取布局组件

目标

布局组件

重构页面组件

主页

用户添加页面

用户列表页面

总结

react 项目实战（六）提取布局组件相关推荐

最新文章

热门文章