react 使用 iframe，并传值给另一个项目

需求：编辑后台 过多且零散，想把不同项目（react，vue等）工程合在一个一个项目；因为工程量太大，所以通过iframe合在一起最方便。

主要思想：通过iframe的url 带着参数 传值给 另一个项目，然后另一个项目接受参数。我们主要解决的是 账号互通。所以通过url，把参数带过去，然后通过cookie主动存储起来。

主工程 传参

 
  import React, { Component } from 'react';
  const { cookie } = "*****"; //自己定义的方法 ，忽略
  // djqUrl 在env 文件下，主要是 根据环境 读取 测试服/正式服 的 地址
  import {djqUrl} from 'env';

  export default class extends Component {
    constructor(props) {
      super(props);
      
  }
    render() {
      // 读取 token，uid 然后通过 iframe URL 传参
      // 需要在  另一个项目 读取参数，并存起来
      let loginToken = cookie.get("loginToken");
      let loginUid = cookie.get("loginUid");
      let src = `${djqUrl}tinyManage?loginToken=${loginToken}&loginUid=${loginUid}`
      return (
        <iframe src={src}
          width="100%"
          height="100%"
          id="oldCommunityId" 
          position="relative"
          overflow="auto"
        />
      )
    }
  }

接受参数 的工程

取决你这个项目 是单页面路由 还是 多页面

• 单页面 可以通过this.props.location.query，当然，不同路由版本说不定不一样，可以打印this.props
• 多页面 可以通过 window.location.search ,或者打印window.location

  // 这个是单页面
        const query = this.props.location.query;
        // console.log(query,'实验11111111111')
        if(Object.keys(query).length <= 1){
            message.error("存储 loginToken 失败")
        }else{
            const loginToken = query.loginToken;
            const loginUid = query.loginUid;
            
            cookie.delete("loginToken")
            cookie.delete("loginUid")
            cookie.set('loginToken',loginToken,0.5);
            cookie.set('loginUid',loginUid,0.5);