react 全局控制参数

文章参考

问题描述

最近在做一个公总号，根据之前的设计，头部显示标题、分享、关闭按钮，底部显示历史前进和后退按钮，最后发布到服务器上，用微信打开，发现顶部和底部的内容完全一样，重复了。原来顶部和底部的公共部分，微信公总号给我们做了，头部的标题就是页面的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 '';
    }
	}
}