react 实时监听iframe中的内容

React本身不提供实时监听iframe中内容的功能，但可以通过以下步骤实现：

1. 在React组件中创建一个iframe元素，并设置src属性为要监听的网页地址。

2. 使用window.postMessage()方法在iframe内部的脚本中发送消息，以通知React组件更新。

3. 在React组件中使用window.addEventListener()方法监听message事件，以接收来自iframe内部的消息。

4. 在接收到消息时，更新React组件的state或执行其他操作。

下面是一个简单的示例代码：

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

function MyComponent() {
  const [content, setContent] = useState('');

  useEffect(() => {
    const iframe = document.createElement('iframe');
    iframe.src = 'http://example.com';
    iframe.addEventListener('load', () => {
      const iframeWindow = iframe.contentWindow;
      iframeWindow.postMessage('ready', '*');
    });
    document.body.appendChild(iframe);

    function handleMessage(event) {
      if (event.origin !== 'http://example.com') return;
      if (event.data.type === 'content') {
        setContent(event.data.content);
      }
    }
    window.addEventListener('message', handleMessage);

    return () => {
      window.removeEventListener('message', handleMessage);
      document.body.removeChild(iframe);
    };
  }, []);

  return (
    <div>
      <h1>Content:</h1>
      <pre>{content}</pre>
    </div>
  );
}

export default MyComponent;

在上面的代码中，我们创建了一个iframe元素，并在它加载完成后发送了一个“ready”消息。在React组件中，我们使用useEffect()钩子函数来监听message事件，并在接收到来自iframe的“content”消息时更新state。在组件卸载时，我们还需要清除事件监听器和删除iframe元素。