一个基于 TypeScript + React 微信禁用分享通用组件

前端项目开发环境：TypeScript + React 

封装一个通用的组件： 该组件可在任意父组件中引入，亲测微信有效，企业微信无效

方式一：纯React方法形式

经过测试发现，未写componentWillReceiveProps方法时，只在进入系统的第一个页面把微信分享禁用了，切换页面后微信分享按钮就出来了。真的是坑。。。然后苦寻原因。

解决办法：由于React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁，在更新期调用this.onBridgeReady()方法不断触发微信禁用分享api

import * as React from 'react';
import * as _ from 'lodash';

interface MriWeixinBridgeProps {}

export default class MriWeixinBridge extends React.Component<MriWeixinBridgeProps, {}> {
    componentDidMount(){
        if (typeof window.WeixinJSBridge === 'undefined') {
            if (window.addEventListener) {
                //主流浏览器，IE8+
                window.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, true);
                window.addEventListener('onWeixinJSBridgeReady', this.onBridgeReady, true);
            }
        } else {
            this.onBridgeReady();
        }
    }

    componentWillReceiveProps() {
        if (_.isObject(window.WeixinJSBridge)) {
            this.onBridgeReady();
        }
    }

    componentWillUnmount() {
        window.removeEventListener('WeixinJSBridgeReady', this.onBridgeReady);
        window.removeEventListener('onWeixinJSBridgeReady', this.onBridgeReady);
    }

    onBridgeReady() {
        window.WeixinJSBridge.call('hideOptionMenu');
    }

    render() {
        return null;
    }
}

方式二：在头部引入script脚本（ 也可以在body引入 ）,该方法只针对第一个页面有效，解决方法待续。。。

import * as React from 'react';

interface MriWeixinBridgeProps {}

export default class MriWeixinBridge extends React.Component<MriWeixinBridgeProps, {}> {
    componentDidMount() {
        let script = document.createElement('script');
        script.text = `
            function onBridgeReady() {
                WeixinJSBridge.call('hideOptionMenu');
            }

            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }
        `;
        document.head.appendChild(script);
    }

    render() {
        return (
            <React.Fragment>
                <div style={{display: 'none'}} />
            </React.Fragment>
        );
    }
}

禁用分享效果图：