文章目录
- 文章参考
- 问题描述
- 解决思路
- 根据 `BaseComponent` 定义一个属性,然后所有的React对象继承
- 通过DVA的modles
- 在window上添加全局变量
- 案例(在window上添加全局变量)
- 定义全局变量
- 引入全局变量
- 定义基础组件
- header组件根据配置,选择页面的内容
文章参考
问题描述
最近在做一个公总号,根据之前的设计,头部显示标题、分享、关闭按钮,底部显示历史前进和后退按钮,最后发布到服务器上,用微信打开,发现顶部和底部的内容完全一样,重复了。原来顶部和底部的公共部分,微信公总号给我们做了,头部的标题就是页面的title,因此我就不需要开发。但是这样会引入另外一个问题,如果在开发测试的时候,是需要选择前进和后退的(浏览器自带的),或者说在开发的时候需要显示或者使用某个功能,发布的时候就不需要,那么这个该怎么解决呢?
解决思路
根据 BaseComponent
定义一个属性,然后所有的React对象继承
webpack 编译器报错,不符合react的思想,除非用到mixin
通过DVA的modles
这样就要在所有的页面添加 state和props的转换函数,工作量比较大
在window上添加全局变量
可以全局使用,但是没有用到闭包的思想,污染了全局
案例(在window上添加全局变量)
定义全局变量
global.constants = {
// 判断环境是dev 还是 pro
process_env: 'pro'
};
引入全局变量
import './serverConfig/config.js'
定义基础组件
所有的业务组件全部继承BaseComponent
import React from 'react';
class BaseComponent extends React.Component {
constructor(props){
super(props);
}
// 判断是否是开发环境还是生产环境
isDevEnv () {
if (global.constants.process_env === 'dev') {
return true;
} else {
return false;
}
}
setTitleName(titleName){
document.title = titleName;
}
// 跳转到指定URL路径
goPage(params){
// 如果传递的是字符串URL,则跳转
if(typeof params === "string"){
let pathObj = {
// pathname 这个值是不能改的,表示Link需要跳转的界面
pathname: params,
};
this.props.history.push(pathObj);
}else{// 如果传递的是对象,则直接传递对象,方便传递参数
this.props.history.push(params);
}
}
}
export default BaseComponent;
header组件根据配置,选择页面的内容
import BaseComponent from '../core/BaseComponent.js';
import { Icon, NavBar } from 'antd-mobile';
export class Header extends BaseComponent {
constructor(props) {
super(props);
let that = this;
let rightComponent = <Icon type={"ellipsis"} className={"color-black"} />
this.state = {
title: props.title || "标题",
iconType: props.iconType || "cross",
bgColor: props.bgColor || "#F2F2F2",
mode: props.mode || "light",
rightComp: props.rightComp || rightComponent,
onLeftClick: props.onLeftClick || that.leftClickAction.bind(that),
onRightClick: props.onRightClick || that.rightClickAction.bind(that),
};
}
// 点击左侧按钮,触发的事件
leftClickAction() {
}
rightClickAction() {
}
render() {
let { onLeftClick, onRightClick, title, iconType, mode, rightComp, bgColor } = this.state;
let styleCustom = {
backgroundColor: bgColor
}
// 顶部导航右侧
let rightCompNew = <div onClick={onRightClick}>{rightComp}</div>;
// 如果是开发环境,显示内容
if (this.isDevEnv()) {
console.log("global.constants.process_env : " + global.constants.process_env);
console.log("ok")
debugger
return (
<div className={"headerTop"}>
<NavBar
style={styleCustom}
mode={mode}
icon={<Icon type={iconType} className={"color-black"} />}
onLeftClick={onLeftClick}
rightContent={rightCompNew}
>{title}</NavBar>
</div>
);
} else { // 如果不是,则不显示任何数据
return '';
}
}
}