文章目录

  • 文章参考
  • 问题描述
  • 解决思路
  • 根据 `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 '';
    }
  }
}