Любой способ для Реагировать во всплывающем окне для связи с родительским окном?

У меня есть процесс OAuth, который выдает окно, но когда я вхожу в систему, перенаправление на страницу обратного вызова OAuth происходит во всплывающем окне, а не в родительском окне (window.opener). Это может быть немного взломанным, но я бы хотел, чтобы всплывающее окно сообщило родителям: "Мы авторизованы!"

Это действительно работает:

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().

2 ответа

Если вы не можете установить отношения между родителями и дочерними элементами между компонентами, React рекомендует настроить систему событий.

Для связи между двумя компонентами, которые не имеют parent-child, вы можете настроить собственное глобальное событие система. Подписаться на события в компонентеDidMount(), отписаться в componentWillUnmount() и call setState(), когда вы получаете событие. Паттерн потока является одним из возможных способов его организации.

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

Посмотрите window.postMessage для межсетевого обмена (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)


Предложение Эелке было на месте.

Я использовал window.postMessage() в дочернем окне, затем window.close(), затем добавил window.addEventListener('message', function(){}) в метод componentDidMount основного/основного компонента.

За дополнительной информацией обращайтесь https://facebook.github.io/react/tips/dom-event-listeners.html!

licensed under cc by-sa 3.0 with attribution.