React挂钩更改postMessage上的状态

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    // 监听postMessage事件
    const handleMessage = (event) => {
      // 更新状态
      setMessage(event.data);
    };

    window.addEventListener('message', handleMessage);

    return () => {
      // 清除事件监听
      window.removeEventListener('message', handleMessage);
    };
  }, []);

  const sendMessage = () => {
    // 发送postMessage消息
    window.parent.postMessage('Hello from MyComponent!', '*');
  };

  return (
    <div>
      <p>Received message: {message}</p>
      <button onClick={sendMessage}>Send Message</button>
    </div>
  );
};

export default MyComponent;