如何阻止React拖拽时重新渲染整个IFrame？

问题根源 #

React Beautiful DnD在拖拽启动时会默认克隆当前拖拽项作为预览元素，这个克隆过程会触发组件重新渲染，导致iframe被重新创建并加载资源。

解决方案 #

1. 自定义拖拽预览（推荐）

绕过默认的克隆机制，自己定义拖拽时显示的预览内容，避免渲染iframe：

import { Draggable } from 'react-beautiful-dnd';

const CustomDraggableItem = ({ item, index }) => {
  // 自定义预览组件，用占位内容代替iframe
  const preview = () => (
    <div style={{ width: '100%', height: '300px', backgroundColor: '#f0f0f0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      拖拽中...
    </div>
  );

  return (
    <Draggable draggableId={item.id} index={index} preview={preview}>
      {(provided, snapshot) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          style={{ ...provided.draggableProps.style, marginBottom: '10px' }}
        >
          <iframe src={item.src} width="100%" height="300" frameBorder="0" />
        </div>
      )}
    </Draggable>
  );
};

2. 用React.memo包裹iframe组件

将iframe封装成独立的记忆化组件，确保只有当props变化时才重新渲染：

import React from 'react';

const MemoizedIframe = React.memo(({ src }) => {
  return <iframe src={src} width="100%" height="300" frameBorder="0" />;
});

// 在拖拽项中使用
const DraggableItem = ({ item, index }) => (
  <Draggable draggableId={item.id} index={index}>
    {(provided, snapshot) => (
      <div
        ref={provided.innerRef}
        {...provided.draggableProps}
        {...provided.dragHandleProps}
        style={{ ...provided.draggableProps.style, marginBottom: '10px' }}
      >
        <MemoizedIframe src={item.src} />
      </div>
    )}
  </Draggable>
);

注意：确保传递给MemoizedIframe的src是稳定的引用，不要在每次渲染时生成新的字符串或对象。

3. 使用React Portal挂载iframe

把iframe挂载到DOM的独立节点，脱离拖拽组件的渲染树，这样拖拽克隆时不会影响到iframe：

import React, { useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';

const IframeWithPortal = ({ src, containerRef }) => {
  const iframeRef = useRef(null);
  const portalRoot = document.getElementById('portal-root') || document.body;

  useEffect(() => {
    if (containerRef.current && iframeRef.current) {
      // 同步iframe和容器的位置
      const containerRect = containerRef.current.getBoundingClientRect();
      iframeRef.current.style.position = 'fixed';
      iframeRef.current.style.top = `${containerRect.top}px`;
      iframeRef.current.style.left = `${containerRect.left}px`;
      iframeRef.current.style.width = `${containerRect.width}px`;
      iframeRef.current.style.height = `${containerRect.height}px`;
    }
  }, [containerRef]);

  return createPortal(
    <iframe ref={iframeRef} src={src} frameBorder="0" style={{ zIndex: 1000 }} />,
    portalRoot
  );
};

// 在拖拽项中使用
const DraggableItem = ({ item, index }) => {
  const containerRef = useRef(null);

  return (
    <>
      <Draggable draggableId={item.id} index={index}>
        {(provided, snapshot) => (
          <div
            ref={(el) => {
              provided.innerRef(el);
              containerRef.current = el;
            }}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            style={{ ...provided.draggableProps.style, marginBottom: '10px', width: '100%', height: '300px' }}
          >
            {/* 占位容器，用于定位iframe */}
          </div>
        )}
      </Draggable>
      <IframeWithPortal src={item.src} containerRef={containerRef} />
    </>
  );
};

需要注意处理拖拽过程中iframe的位置同步，避免错位。

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