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を変更すると、Webが機能しなくなります

本当にかっこいいアイデアです。ハイキングから戻ったら、遊んでみます。

2019年8月6日火曜日、午後11時43分晓解説[email protected]は次のように書いています。

@HsuTinghttps ：//github.com/HsuTingそれはより簡単でより良いです。 それでも
HTML5Backendインターフェイスにバインドされています。 HTML5BackendがaddEventListenersを変更した場合
=> addListeners、私たちのウェブは壊れます

—
あなたが割り当てられたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/react-dnd/react-dnd/issues/1496?email_source=notifications&email_token=AAA3XCDZJS3V5E7YISDRUC3QDJVJLA5CNFSM4IIMWOQ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNM
またはスレッドをミュートします
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;
};