如何避免Next.js+Tailwind组件站切换视图时iframe重载？

问题根源 #

你当前用srcDoc绑定iframe内容时，切换「代码/预览」视图会触发组件重渲染，哪怕srcDoc内容没变化，React重新生成props也会导致iframe重置重载。

解决方案：手动操作iframe文档内容+控制组件显隐 #

核心思路是用useRef保存iframe实例，通过直接操作iframe内部文档更新内容，同时切换视图时只控制iframe的显示/隐藏，不卸载组件。

1. 封装预览组件（替换原iframe写法）

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

export default function ComponentViewer({ componentHtml }) {
  const [isPreview, setIsPreview] = useState(true);
  const iframeRef = useRef(null);

  // 仅当组件HTML内容变化时，更新iframe内部文档
  useEffect(() => {
    if (!iframeRef.current || !componentHtml) return;

    const iframeDoc = iframeRef.current.contentDocument || iframeRef.current.contentWindow.document;
    // 写入完整HTML结构，避免iframe重载
    iframeDoc.open();
    iframeDoc.write(componentHtml);
    iframeDoc.close();
  }, [componentHtml]);

  return (
    <div className="w-full h-full">
      {/* 视图切换按钮 */}
      <div className="flex gap-2 mb-3">
        <button 
          onClick={() => setIsPreview(true)}
          className={`px-3 py-1 rounded ${isPreview ? 'bg-blue-500 text-white' : 'bg-gray-100'}`}
        >
          预览
        </button>
        <button 
          onClick={() => setIsPreview(false)}
          className={`px-3 py-1 rounded ${!isPreview ? 'bg-blue-500 text-white' : 'bg-gray-100'}`}
        >
          代码
        </button>
      </div>

      {/* 预览/代码区域 */}
      {isPreview ? (
        <iframe
          ref={iframeRef}
          frameBorder="0"
          width="100%"
          height="100%"
          sandbox="allow-scripts"
          loading="lazy"
        />
      ) : (
        <pre className="p-4 bg-gray-50 rounded-md overflow-auto h-full">
          <code>{componentHtml}</code>
        </pre>
      )}
    </div>
  );
}

2. 确保传入的componentHtml是完整HTML结构

要在HTML中引入Tailwind样式（用CDN或内置样式），否则组件会丢失样式：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 可选：自定义Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {},
      }
    }
  </script>
</head>
<body class="p-4">
  <!-- 你的Tailwind组件代码 -->
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    示例按钮
  </button>
</body>
</html>

关键说明 #

• 用useRef绑定iframe后，直接操作contentDocument更新内容，不会触发iframe的重载逻辑
• 切换视图时仅控制isPreview状态，iframe组件始终存在于DOM中（只是隐藏），避免卸载后重新挂载导致的重载

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