react-dnd拖拽到iframe首先在react中使用iframe使用的是react-frame-component

首先在react中使用iframe使用的是react-frame-component，可以在iframe中渲染react组件

<Frame>
    <MyComponent />
</Frame>

iframe作为拖拽的目标所以需要包裹一层drop否则无法正常放置，那么代码就变成了，在拖拽开始需要将iframe的pointer-events设置为false

// previewIframe
  <div ref={drop}>
      <Frame
        <DndFrame>
          <Preview />
        </DndFrame>
      </Frame>
    </div>
    
  // DndFrame
  const DndFrame = ({ children }) => {
  const { dragDropManager } = useContext(DndContext);
  const { window } = useContext(FrameContext);

  useEffect(() => {
    const backed: any = dragDropManager?.getBackend();
    backed?.addEventListeners(window);
    return () => {
      backed?.removeEventListeners(window);
    };
  }, [dragDropManager, window]);

  return children;
};

至此已经可以正常的将iframe外的内容拖拽放到iframe里面preview内容了，preview里面的内容就是正常拖拽代码并且可以使用状态管理不需要使用postmessage进行通信

但是iframe中的样式是缺失的，还需要将需要的样式表进行注册,直接在Frame中添加head

<Frame head={<link type="text/css" rel="stylesheet" href="xxx"/>}></Frame>

如此react-dnd就完成了从iframe外部拖拽到iframe内部的流程