reactjs - 弹出窗口中的 React 有什么方法可以与父窗口通信吗？

Question

我有一个弹出窗口的 OAuth 进程，但是当我登录时，到 OAuth 回调页面的重定向发生在弹出窗口中，而不是父窗口中 (window.opener) 。这可能有点hacky，但我想要一种让弹出窗口告诉家长“我们已获得授权!”的方法

这确实有效:

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 建议设置事件系统。

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this.

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

查看 window.postMessage 进行跨窗口通信 ( https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage )