react 项目实战(六)提取布局组件
重复代码是混乱的根源!,本篇文章我们来继续消灭重复代码。
目标
细心的同学应该能发现:每一个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来替代了,是不是觉得代码又变得干净了很多呢?
.
react 项目实战(六)提取布局组件的更多相关文章
- react 项目实战(四)组件化表单/表单控件 高阶组件
高阶组件:formProvider 高阶组件就是返回组件的组件(函数) 为什么要通过一个组件去返回另一个组件? 使用高阶组件可以在不修改原组件代码的情况下,修改原组件的行为或增强功能. 我们现在已经有 ...
- React项目实战:react-redux-router基本原理
React相关 React 是一个采用声明式,高效而且灵活的用来构建用户界面的框架. JSX 本质上来讲,JSX 只是为React.createElement(component, props, .. ...
- miniFTP项目实战六
项目简介: 在Linux环境下用C语言开发的Vsftpd的简化版本,拥有部分Vsftpd功能和相同的FTP协议,系统的主要架构采用多进程模型,每当有一个新的客户连接到达,主进程就会派生出一个ftp服务 ...
- react 项目实战(十)引入AntDesign组件库
本篇带你使用 AntDesign 组件库为我们的系统换上产品级的UI! 安装组件库 在项目目录下执行:npm i antd@3.3.0 -S 或 yarn add antd 安装组件包 执行:npm ...
- react 项目实战(九)登录与身份认证
SPA的鉴权方式和传统的web应用不同:由于页面的渲染不再依赖服务端,与服务端的交互都通过接口来完成,而REASTful风格的接口提倡无状态(state less),通常不使用cookie和sessi ...
- react 项目实战(八)图书管理与自动完成
图书管理 src / pages / BookAdd.js // 图书添加页 /** * 图书添加页面 */ import React from 'react'; // 布局组件 import H ...
- react 项目实战(七)用户编辑与删除
添加操作列 编辑与删除功能都是针对已存在的某一个用户执行的操作,所以在用户列表中需要再加一个“操作”列来展现[编辑]与[删除]这两个按钮. 修改/src/pages/UserList.js文件,添加方 ...
- 3、手把手教React Native实战之flexbox布局
flexbox是Flexible Box的缩写,弹性盒子布局 主流的浏览器都支持 flexbox布局是伸缩容器(container)和伸缩项目(item)组成 Flexbox布局的主体思想是元素可以 ...
- 【Flutter实战】六大布局组件及半圆菜单案例
老孟导读:Flutter中布局组件有水平 / 垂直布局组件( Row 和 Column ).叠加布局组件( Stack 和 IndexedStack ).流式布局组件( Wrap )和 自定义布局组件 ...
随机推荐
- jquery /css3 全屏的渐变背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- cut - 在文件的每一行中提取片断
总览 (SYNOPSIS) ../src/cut [OPTION]... [FILE]... 描述 (DESCRIPTION) 在 每个文件 FILE 的 各行 中, 把 提取的 片断 显示在 标准输 ...
- mysql 添加记录或者删除记录
insert into tableName (prod1,pord2,... ) values (v1,v2,...) [,(v1,v2,...),(v1,v2,...)] 程度从强到弱 1.drop ...
- 03XML Schema Definition
1. XML Schema Definition 1. XML Schema Definition XML Schema(XML Schema Definition,XSD)用于描述 XML 文档的结 ...
- 【讲●解】火车进出栈类问题 & 卡特兰数应用
火车进出栈类问题详讲 & 卡特兰数应用 引题:火车进出栈问题 [题目大意] 给定 \(1\)~\(N\) 这\(N\)个整数和一个大小无限的栈,每个数都要进栈并出栈一次.如果进栈的顺序为 \( ...
- 珂朵莉树(Chtholly Tree)学习笔记
珂朵莉树(Chtholly Tree)学习笔记 珂朵莉树原理 其原理在于运用一颗树(set,treap,splay......)其中要求所有元素有序,并且支持基本的操作(删除,添加,查找......) ...
- [Python3网络爬虫开发实战] 5.2-关系型数据库存储
关系型数据库是基于关系模型的数据库,而关系模型是通过二维表来保存的,所以它的存储方式就是行列组成的表,每一列是一个字段,每一行是一条记录.表可以看作某个实体的集合,而实体之间存在联系,这就需要表与表之 ...
- 漫谈WEB前端学习路线
- drupal8 用户指南
一句话概括 - 官方文档 概念- Drupal是个内容管理系统哦 那么,什么是内容管理系统? 就是用户自己编辑自己的网站内容的一个系统. 那么,什么是Drupal呢? Drupal是一个通过模块和主题 ...
- allegro中查看寄生参数
在allegro中可以查看线的寄生参数,这个命令所在的位置在如下如位置: 版权声明:本文为博主原创文章,未经博主允许不得转载.