在 React 组件中监听 window.onmessage

Question

我正在尝试在我的反应课上监听一条消息。它不起作用。

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleMessage = this.handleMessage.bind(this);
  }
  componentDidMount(){
    window.addEventListener("onmessage", this.handleMessage);
  }
  componentWillUnmount() {
    window.removeEventListener('onmessage', this.handleMessage);
  }
  handleMessage(e){
    console.log('me?')
  }
}

我这样发送消息：

window.opener.postMessage('a message', '*');

我知道消息正在到达窗口，因为我可以在加载 React 应用程序的纯 JS 文件中成功收听它。然而，像上面那样在 React 中监听它是行不通的。

为什么我的监听器没有被触发，我该如何调试它？

Answer 1

事件的名称应该是message而不是onmessage：

 window.addEventListener("message", this.handleMessage);

请参阅：已调度的事件