Question

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

这是我的发送方代码块：

<iframe id="eda" 
               style="display: none;"
                src="http://myhost:3000/"
                width="100%" height="600" border="0" marginwidth="0"
                marginheight="0" 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
     );
}

我的Recevier（反应）代码块：

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

handleLoad(event) {
     alert(event.data);
}

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

Answer 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 });
});

我如何从反应中获取邮件信息？

1 个答案: