Un modo per Reagire in un popup per comunicare con la finestra principale?

Question

Ho un processo OAuth che fa apparire una finestra, ma quando effettuo il login, il reindirizzamento alla pagina di callback OAuth avviene all'interno del popup piuttosto che della finestra genitore (window.opener). Questo potrebbe essere un po 'hacky, ma mi piacerebbe un modo per la finestra popup per dire al genitore "siamo autorizzati!"

Questo funziona davvero:

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

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

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

ma mi chiedo se c'è qualche modo per avere la finestra pop-up dire la finestra padre per chiamare una funzione prop, per esempio this.props.oauthSucceeded().

Answer 1

Quando non è possibile stabilire una relazione genitore-figlio o fratello tra i componenti, React consiglia di configurare un sistema di eventi.

Per la comunicazione tra due componenti che non hanno un rapporto padre-figlio, è possibile impostare il proprio sistema di evento globale . Abbonarsi agli eventi in componentDidMount(), annullare l'iscrizione in componentWillUnmount() e chiamare setState() quando si riceve un evento. Il motivo del flusso è uno dei modi possibili per sistemarlo.

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

Dai un'occhiata alla window.postMessage per la comunicazione finestra croce (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)

Answer 2

suggerimento di Eelke era perfetto.

ho usato window.postMessage() nella finestra bambino, allora window.close(), poi aggiunto un window.addEventListener('message', function(){}) nel metodo di di componente/maestro principale componentDidMount.

Check out https://facebook.github.io/react/tips/dom-event-listeners.html per ulteriori informazioni!