我如何从反应中获取消息后数据？

Posted 2023-02-21

【中文标题】我如何从反应中获取消息后数据？

【英文标题】：How can i get postmessage data from react?

【发布时间】：2019-08-20 01:13:13

【问题描述】：

我正在尝试在我的 jsp 项目中将 react url 作为 iframe 加载。

这里是我的发送方代码块：

<iframe id="eda" 
               style="display: none;"
                src="http://myhost:3000/"
                  border="0" margin
                margin scrolling="no">
</iframe>   

****

function loadReactIframe()
    document.getElementById("eda").contentWindow.postMessage('GET MESSAGE FROM ME', '*');

我还尝试了以下方法：

function loadReactIframe()
      document.getElementById("eda").contentWindow.postMessage(
            'GET MESSAGE FROM ME', 
            'http://myhost', 3000
     );

我的接收器（react）代码块：

componentDidMount() 
     window.addEventListener('load', this.handleLoad);
     alert('componentDidMount')


handleLoad(event) 
     alert(event.data);

但我无法从事件中获取数据。

【问题讨论】：

试试这个...window.addEventListener('message', function(event) );

消息事件无法捕获发布消息。 ://

你的接收者在iframe里面，对吧？？

是的，我的接收器是一个 react 项目，我从 iframe 中的一个 jsp 项目中调用它。

监听初始化后是否调用loadReactIframe...

【参考方案1】：

已经为此制作了一个有用的钩子。 https://www.npmjs.com/package/@rottitime/react-hook-message-event

自述文件页面有说明，但这里是它的工作原理 安装挂钩：

npm i @rottitime/react-hook-message-event

在您的组件中使用它，就像使用任何其他钩子一样，例如useState.

在你的组件中导入文件

import useMessage from '@rottitime/react-hook-message-event'

您可以收听消息并使用回调进行响应。比如下面的场景：

父窗口从子窗口监听消息hello 家长从孩子那里收到hello 家长将world 发回给孩子

//listens for the 'hello' message from window.postMessage()
useMessage('hello', (send, payload) => 
  //use sendMessage to post back to the sender
  send( type: 'world', success: true );
);