Question

我有一个OAuth进程弹出一个窗口，但是当我登录时，重定向到OAuth回调页面发生在弹出窗口而不是父窗口（window.opener）。这可能有点hacky，但我想让弹出窗口告诉父母＆＃34;我们已获得授权！＆＃34;

这实际上有效：

OAuthCallback = React.createClass({
  displayName: 'OAuthCallback',

  render() {
    window.opener.console.log('hello parent window');

    return (
      <div>
        Hi, OAuth is process is done.
      </div>
    )
  }
});

但是我想知道是否有某些方法可以让弹出窗口告诉父窗口调用prop函数，例如this.props.oauthSucceeded()。

Answer 1

当您无法在组件之间建立任何父子关系或兄弟关系时，React建议您设置一个事件系统。

用于两个没有组件的组件之间的通信亲子关系，您可以设置自己的全局事件系统。订阅componentDidMount（）中的事件，取消订阅 componentWillUnmount（），并在收到事件时调用setState（）。 Flux模式是安排这种方式的可能方式之一。

请参阅https://facebook.github.io/react/tips/communicate-between-components.html

查看((Number) (matchesArray.get(0))).longValue();进行跨窗口通信（https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage）

Answer 2

Eelke的建议很明显。

我在子窗口中使用了window.postMessage()，然后window.close()，然后在main / master组件的window.addEventListener('message', function(){})方法中添加了componentDidMount。

查看https://facebook.github.io/react/tips/dom-event-listeners.html了解详情！

Answer 3

我有一个独特的情况，我必须处理来自asp.net应用程序的iframed react弹出窗口。除了关闭它的其他方法之外，我还必须提供一个x按钮以通过在父asp.net中调用一个closePopup方法来关闭弹出窗口。我使用了window.parent。下面是我的用法。

if (window && window.parent) {
    window.parent.closePopup();
}

弹出窗口中的React以何种方式与父窗口通信？

3 个答案: