亲测有效的iframe跨域通信解决办法之一

最近公司项目内通过iframe引入了另一个项目的内容，子域和父域不属于同域，但需要将父域token传入子域供子域的http请求使用，若子域内的请求判断该token已过期，需要子域调起父域退出登录。
问题就卡在跨域通信这个关键点上。
万能的度娘里搜到n种方法，选择下列一种测试，效果很不错，已经顺利完成了上述需求。
postMessage方法发送数据，监听message事件获取数据

父域部分
export default class ParentComponent extends React.Component {
    componentDidMount() {
        window.onmessage = e => {
//监听message事件
            if (e.data === 'login') {
                //根据子域传送来的数据 执行指定操作，传送来的数据在data中
            }
        };
    }
    sendToken = () => {
//必须是iframe加载完成后才可以向子域发送数据
        const childFrameObj = document.getElementById('calculation');
        childFrameObj.contentWindow.postMessage('要发送的数据，必须是字符串', '*');
    };
    render() {
        return (
            <div >
                    <iframe
                            id="calculation"
                            src=“”
                            onLoad={this.sendToken}
                        />
            </div>
        );
    }
}

子域部分
window.parent.postMessage('需要传送的数据，必须是字符串', '*'); //向父域传送数据

export default class ChildComponent extends React.Component {
    componentDidMount() {
       // 首次打开时需要监听message事件，接收父域传送来的数据
      //以我的项目里接收token举例
        if (sessionStorage.token) {
            //若子域内已存在token则不再需要监听message事件
           //do something
            window.onmessage = null;
            return;
        }
      //若token不存在
        window.onmessage = e => {
            if (e.data) {
                sessionStorage.token = e.data;
                //do something
            }
        };
    render() {
        return (
            <div >
                    xxxxxx
            </div>
        );
    }
}