移动端项目中页面多是头部header，中间内容，底部footer的结构，这里头部部分多为固定的结构，左边返回按钮，中间标题，右边可有可没有，为了减少重复编写，所以有个移动端的head组件是比较需要的。
head组件，先附上代码
import React, { Component } from 'react';
import './uiComponents.less';
class UiHead extends Component {
constructor(props, context) {
super(props, context);
this.state = {
headerOptions:{
left: "",
title: "titile",
right: ""
}
}
this.uiHeaderRef = React.createRef()
}
render(){
return (
<div className="ui_head" ref={this.uiHeaderRef}>
<div className="ui_head_left" onClick={this.leftClick.bind(this)}>{this.props.headerOptions && this.props.headerOptions.left ? this.props.headerOptions.left : <img src={require("../../assets/img/back-zqq.png")} alt=""/>}</div>
<div className="ui_head_middle">{this.props.headerOptions && this.props.headerOptions.title ? this.props.headerOptions.title : this.state.headerOptions.title}</div>
<div className="ui_head_right" onClick={this.rightClick.bind(this)}>{this.props.headerOptions && this.props.headerOptions.right ? this.props.headerOptions.right : this.state.headerOptions.right}</div>
</div>
)
}
componentDidMount() {
this.setDefaultHead();
}
setDefaultHead() {
/** 该方法用于设置头部组件的默认值，如果父组件有传入更改则采用父组件的值
* left为头部左边内容，title为头部中间标题内容，right为头部右边内容
*/
/** 该判断用于添加头部组件的class */
if(this.props.className) {
this.uiHeaderRef.current.classList.add(this.props.className)
}
}
leftClick() {
/** 该方法用于判断是否有传入点击头部左边icon的事件，有则用之，无则默认返回 */
if(this.props.leftClick) {
this.props.leftClick();
} else {
window.history.go(-1);
}
}
rightClick() {
/** 该方法用于判断是否有传入点击头部右边icon的事件，有则用之，无默认事件 */
if(this.props.rightClick) {
this.props.rightClick();
}
}
}
class UiContainer extends Component {
constructor(props, context) {
super(props, context);
this.state = {}
this.uiContainer = React.createRef()
}
render(){
/** this.props.children放在内部使得在其他页面调用该组件时可以向里面插入html标签，
* 需要注意，this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;
* 如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。
* */
return (
<div className="ui_container" ref={this.uiContainer}>{this.props.children}</div>
)
}
componentDidMount() {
/** 该判断用于添加内容组件的class */
if(this.props.className) {
this.uiContainer.current.classList.add(this.props.className)
}
}
}
class UiLayout extends Component {
constructor(props, context) {
super(props, context);
this.state = {}
this.uiLayout = React.createRef()
}
render(){
/** this.props.children放在内部使得在其他页面调用该组件时可以向里面插入html标签，
* 需要注意，this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;
* 如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。
* */
return (
<div className="ui_layout" ref={this.uiLayout}>{this.props.children}</div>
)
}
componentDidMount() {
/** 该判断用于添加外层布局组件的class */
if(this.props.className) {
this.uiLayout.current.classList.add(this.props.className)
}
}
}
export {UiHead, UiContainer, UiLayout}
样式部分就不上代码了，简单的说下布局方式，header部分的总体布局为flex布局，返回垂直居中，并且左右两边各留出相同宽以供左右按钮的放置，左右两边不拉伸，然后中间给div，flex为1，占据除掉左右两边的所有部分，这样整个header就成型了。由于React可以接受html标签形式的dom，所以左右两边接受父组件出过来的参数，当然也也可以设置默认值，父组件的参数从props上去，若是不想采用默认方法也可以重父组件的props取，所以在左右按钮的方法上面增加了判断，采取什么方式可自行决断，然后其他两个组件主要是为了整体页面结构而加的，没有什么大的内容限制
详细代码可参考：https://github.com/HanYamu/
