将React应用功能分配给窗口变量

时间:2019-04-11 22:31:46

标签: javascript reactjs

我在同一页面上有两个React app版本。一个是较新的应用程序(反应15),另一个是更新的应用程序(反应16)。现在,它们正在通过全局变量相互传递数据。我想知道是否有一种方法可以在挂载时通过从旧应用程序分配给该函数的全局变量从我的React 15应用程序调用我的React 16应用程序。

这就是我所拥有的:

反应15

...
 componentDidMount() {
    console.log('[componentDidUnmount]')
    window.playFunction = this.restoreAllTimelines;
    window.pauseFunction = this.pauseAllTimelines;

    console.log(window.playFunction + " " + window.pauseFunction)

    window.mainContainer = {
      addStateValidator: this.addStateValidator,
    };
    this.props.start();
  }
...

反应16

getScreenshotHandler = () => {
    // These 2 lines communicate with content_script.js that's from the extension
    var data = { type: "FROM_PAGE", text: "Screenshot Request" };
    // window.postMessage(data, "*");
    window.parent.postMessage(data, "*");

    window.pauseFunction();

    this.notify(true, "Screenshot Taken. Nice!")
    if (this.state.pauseOnShot) {
        triggerPlay();
    }
}
componentWillUnmount() {
    window.playFunction();
    if (this.props.pauseOnShot) {
        triggerPlay();
    }
}

index.html

...
<script>
window.r15r16URLPipe=null;
window.playFunction=null;
window.pauseFunction=null;
<script/>

<div id="root"></div> //React 15
<div id="screenshot"></div> // React 16
...

任何输入将不胜感激。谢谢!

0 个答案:

没有答案