如何在React中将本地组件设置为iframe的内容源？

Hey there! The approach you’re trying right now won’t work because the src prop of an <iframe> expects a URL, data URI, or HTML string — not a React component element directly. Let’s walk through a few reliable ways to render your AnotherComponent inside an iframe:

方式一：使用srcdoc + ReactDOMServer.renderToString #

You can convert your React component to an HTML string using ReactDOMServer.renderToString, then wrap it in a full HTML document and pass it to the iframe’s srcdoc prop. This works well if your component doesn’t have complex dependencies that require bundling.

import React, { Component } from 'react';
import ReactDOMServer from 'react-dom/server';
import AnotherComponent from './AnotherComponent';

export default class MyComponent extends Component {
  render() {
    // Convert the component to an HTML string
    const componentHtml = ReactDOMServer.renderToString(<AnotherComponent />);
    
    // Build a complete HTML document for the iframe
    const iframeContent = `
      <!DOCTYPE html>
      <html>
        <head>
          <!-- Add any necessary styles here -->
          <style>
            /* Example global styles for the iframe */
            body { margin: 0; padding: 1rem; }
          </style>
        </head>
        <body>
          <div id="root">${componentHtml}</div>
          <!-- Load React and ReactDOM for client-side interactivity -->
          <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
          <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
          <script>
            // Hydrate the component to make it interactive
            const root = ReactDOM.createRoot(document.getElementById('root'));
            root.render(React.createElement(AnotherComponent));
          </script>
        </body>
      </html>
    `;

    return (
      <div>
        <iframe srcdoc={iframeContent} title="Embedded AnotherComponent" />
      </div>
    );
  }
}

Note: If your component uses custom hooks, local state, or bundled dependencies, the CDN React scripts might not be enough. In that case, you’ll need to bundle AnotherComponent into a standalone JS file and reference it in the iframe’s HTML.

方式二：直接将组件挂载到iframe的内容窗口 #

等待iframe加载完成后，访问它的内部文档，然后直接挂载你的React组件。这种方式允许组件共享父应用的React实例和依赖，无需额外引入CDN脚本。

以下是函数组件的示例（你可以用componentDidMount适配类组件）：

import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom/client';
import AnotherComponent from './AnotherComponent';

export default function MyComponent() {
  const iframeRef = useRef(null);

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;

    // 获取iframe的文档和窗口对象
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    const iframeWindow = iframe.contentWindow;

    // 为组件创建根元素
    const rootElement = iframeDoc.createElement('div');
    rootElement.id = 'iframe-root';
    iframeDoc.body.appendChild(rootElement);

    // 在iframe内渲染组件
    const root = ReactDOM.createRoot(rootElement);
    root.render(<AnotherComponent />);

    // 清理逻辑：父组件卸载时同时卸载iframe内的组件
    return () => {
      root.unmount();
    };
  }, []);

  return (
    <div>
      <iframe ref={iframeRef} title="Embedded AnotherComponent" />
    </div>
  );
}

Note: 这种方式仅适用于同源iframe（你的场景符合，因为嵌入的是自己的组件）。跨域iframe会由于浏览器安全规则限制，无法访问其内容文档。

方式三：使用第三方库（react-frame-component） #

如果你想要一个更简单、经过实践检验的方案，可以使用react-frame-component——一个流行的库，它会帮你处理所有iframe的初始化和组件挂载逻辑。

首先安装依赖：

npm install react-frame-component
# 或者
yarn add react-frame-component

然后在组件中使用：

import React from 'react';
import Frame from 'react-frame-component';
import AnotherComponent from './AnotherComponent';

export default function MyComponent() {
  return (
    <div>
      <Frame>
        <AnotherComponent />
      </Frame>
    </div>
  );
}

这个库会自动处理样式隔离、iframe尺寸调整（如果需要）以及组件生命周期管理，如果你不想重复造轮子，这是个绝佳选择。

内容的提问来源于stack exchange，提问作者Karan Bhutwala