React-dnd: 외부에서 iframe으로 드래그하는 방법

이 코드를 단순화하는 더 쉬운 솔루션을 찾았지만 이것이 더 나은 솔루션인지 확신할 수 없습니다. 이 문제를 해결하는 데 도움이 되기를 바랍니다.

import React, { useContext, useEffect } from 'react';
import DndProvider, { DndContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import Frame, { FrameContext } from 'react-frame-component';

const DndFrame = ({ children }) => {
  const { dragDropManager } = useContext(DndContext);
  const { window } = useContext(FrameContext);

  useEffect(() => {
    dragDropManager.getBackend().addEventListeners(window);
  });

  return children;
};

const Example = () => (
  <DndProvider backend={HTML5Backend}>
    <Frame>
       <DndFrame>
          <div>...</div>
       </DndFrame>
    </Frame>
  </DndProvider>
);

@HsuTing 더 쉽고 좋습니다. 그러나 여전히 HTML5Backend 인터페이스에 바인딩되어 있습니다. HTML5Backend가 addEventListeners => addListeners를 변경하면 웹이 고장날 것입니다.

정말 멋진 아이디어입니다. 하이킹에서 돌아올 때 가지고 놀겠습니다.

2019년 8월 6일 화요일 오후 11:43 晓爽[email protected] 작성:

@HsuTing https://github.com/HsuTing 더 쉽고 좋습니다. 하지만 여전히
HTML5Backend 인터페이스에 바인딩됩니다. HTML5Backend가 addEventListeners를 변경하는 경우
=> addListeners, 우리의 웹은 고장날 것입니다

—
당신이 할당되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/react-dnd/react-dnd/issues/1496?email_source=notifications&email_token=AAA3XCDZJS3V5E7YISDRUC3QDJVJLA5CNFSM4IIMWOQ2YY3PNVWWK3TUL52HS4DFVEXG43VMVB
또는 스레드를 음소거
https://github.com/notifications/unsubscribe-auth/AAA3XCGHNHO3M3CSL5VRUQTQDJVJLANCNFSM4IIMWOQQ
.

이 코드를 단순화하는 더 쉬운 솔루션을 찾았지만 이것이 더 나은 솔루션인지 확신할 수 없습니다. 이 문제를 해결하는 데 도움이 되기를 바랍니다.

import React, { useContext, useEffect } from 'react';
import DndProvider, { DndContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import Frame, { FrameContext } from 'react-frame-component';

const DndFrame = ({ children }) => {
  const { dragDropManager } = useContext(DndContext);
  const { window } = useContext(FrameContext);

  useEffect(() => {
    dragDropManager.getBackend().addEventListeners(window);
  });

  return children;
};

const Example = () => (
  <DndProvider backend={HTML5Backend}>
    <Frame>
       <DndFrame>
          <div>...</div>
       </DndFrame>
    </Frame>
  </DndProvider>
);

그것은 훌륭한 접근 방식이며 저에게 효과적입니다.

이 코드를 단순화하는 더 쉬운 솔루션을 찾았지만 이것이 더 나은 솔루션인지 확신할 수 없습니다. 이 문제를 해결하는 데 도움이 되기를 바랍니다.

import React, { useContext, useEffect } from 'react';
import DndProvider, { DndContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import Frame, { FrameContext } from 'react-frame-component';

const DndFrame = ({ children }) => {
  const { dragDropManager } = useContext(DndContext);
  const { window } = useContext(FrameContext);

  useEffect(() => {
    dragDropManager.getBackend().addEventListeners(window);
  });

  return children;
};

const Example = () => (
  <DndProvider backend={HTML5Backend}>
    <Frame>
       <DndFrame>
          <div>...</div>
       </DndFrame>
    </Frame>
  </DndProvider>
);

typescript로 시도할 때 Property 'addEventListeners' does not exist on type 'Backend' 오류가 발생합니다.

TS에서 이 문제를 해결할 수 있는 방법이 있습니까?

addEventListeners는 백엔드 인터페이스에 노출되지 않습니다. DOM/브라우저에 따라 다르기 때문에 노출하고 싶지 않습니다. 우리가 해야 할 일은 다음과 같습니다.

// detect if SSR mode
const DEFAULT_GLOBAL_CONTEXT = typeof window !== 'undefined' ? window : global

const DndFrame = ({ children, globalContext = DEFAULT_GLOBAL_CONTEXT}) => {
  const { dragDropManager } = useContext(DndContext);
  const { window } = useContext(FrameContext);
  const backend = useMemo(() => dragDropManager.getBackend(), [dragDropManager])

  useEffect(() => {
     // This will required adding an initialize() method to the Backend interface.
    // Backend constructors will have to thunk over to it. It could replace constructors, but that would be semver major.
    backend.initialize(dragDropManager, globalContext)
    backend.setup()
  }, [globalContext]);

  return children;
};