पैरेंट विंडो के साथ संवाद करने के लिए पॉपअप में प्रतिक्रिया के लिए कोई तरीका?

Question

मुझे एक ओएथ प्रक्रिया मिली है जो एक विंडो को पॉप अप करता है, लेकिन जब मैं लॉग इन करता हूं, ओएथ कॉलबैक पेज पर रीडायरेक्ट मूल विंडो (window.opener) के बजाय पॉपअप के भीतर होता है। यह थोड़ा हैकी हो सकता है, लेकिन मैं पॉपअप विंडो के लिए माता-पिता को बताने का एक तरीका चाहूंगा "हम अधिकृत हैं!"

यह वास्तव में काम करता है:

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

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

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

लेकिन वहाँ किसी तरह मैं पॉपअप विंडो एक प्रोप समारोह, उदा कॉल करने के लिए माता-पिता खिड़की बता हो सकता है कि अगर मैं सोच रहा हूँ this.props.oauthSucceeded()।

Answer 1

जब आप घटकों के बीच कोई अभिभावक-बच्चे या भाई संबंध स्थापित करने में असमर्थ होते हैं, तो प्रतिक्रिया एक ईवेंट सिस्टम स्थापित करने की सिफारिश करती है।

दो घटकों के बीच संचार कि एक माता पिता के बच्चे का रिश्ता नहीं है के लिए, आप अपने खुद के वैश्विक घटना प्रणाली स्थापित कर सकते हैं। घटक DidMount() में ईवेंट की सदस्यता लें, घटक WillUnmount() में सदस्यता रद्द करें, और जब आप कोई ईवेंट प्राप्त करते हैं तो setState() को कॉल करें। फ्लक्स पैटर्न इसे व्यवस्थित करने के संभावित तरीकों में से एक है।

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

पार खिड़की संचार (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)

Answer 2

के लिए window.postMessage पर एक नज़र Eelke के सुझाव की मौके पर ही था है देखते हैं।

मैं चाइल्ड विंडो, तो window.close() में window.postMessage() इस्तेमाल किया है, तो मुख्य/मास्टर घटक के की componentDidMount विधि में एक window.addEventListener('message', function(){}) गयी।

अधिक जानकारी के लिए https://facebook.github.io/react/tips/dom-event-listeners.html देखें!