React-dnd: 2つのHTML5バックエンドを同時に持つことはできません

DragDropContextのソースを確認してください。 ツリーの上のコンポーネントで指定されていれば、既存のマネージャーを再利用できるはずだと思います。 しかし、それでも難しい質問です。提案された解決策はありますか？

ツリーの上のコンポーネントで指定されていれば、既存のマネージャーを再利用できるはずだと思います。

これが可能であっても、エクスポートされたコンポーネントは独立して動作できる必要があり、バックエンドが（コンポーネントが使用されているアプリ内に）存在する場合は、チェーンのどこかに再利用する必要があります。 ソースを読んで、これを実行できるかどうかを確認します。

残念ながら、私が今考えることができる唯一の解決策は、最終コンポーネントをそのままエクスポートし、ユーザーが選択したバックエンドでDragDropContextを追加することを期待することです。 どう思いますか？

エクスポートされるコンポーネントも独立して機能できる必要があり、バックエンドが（コンポーネントが使用されているアプリ内に）存在する場合は、チェーンのどこかに再利用する必要があります。

はい、これはDragDropContext完全に使用せず、代わりにコンテキストでdragDropManagerを手動で使用することで可能です。 コンポーネントはコンテキストを調べて、既存のdragDropManagerをコンテキストに渡すか、独自のコンポーネントを作成します。 しかし、それはやや壊れやすいようです。

残念ながら、私が今考えることができる唯一の解決策は、最終コンポーネントをそのままエクスポートし、ユーザーが選択したバックエンドでDragDropContextを追加することを期待することです。 どう思いますか？

これが最も柔軟なソリューションだと思います。 そこで意見を述べて、 <MyComponentContext>を適用するDragDropContext(HTML5Backend) <MyComponentContext>をエクスポートすることもできます。

エクスポート<MyComponentContext>適用されるDragDropContext(HTML5Backend)

申し訳ありませんが、よくわかりません。 これをもう少し明確にできますか？

export default function MyTagControlContext(DecoratedClass) {
  return DragDropContext(HTML5Backend)(DecoratedClass);
}

また、ユーザーに、最上位のコンポーネントをMyTagControlContextにラップするか、React DnDを_すでに使用している場合はDragDropContext直接使用するように指示できます。

ああ！ これはどう？ これは醜く見えますか？

// in main component file
module.exports = {
    WithContext: DragDropContext(HTML5Backend)(ReactTags),
    WithOutContext: ReactTags
};

使用法は次のようになります

var ReactTags = require('react-tags').WithContext; // if your app doesn't use react-dnd
var ReactTags = require('react-tags').WithOutContext; // if your app already uses react-dnd.

各<ReactTags>はバックエンドの独自のコピーを取得し、これらのバックエンドは同じグローバルウィンドウイベントを処理するため、上記で貼り付けた不変エラーが発生するため、これは機能しないと思います。

私がうまくいくと思うのは、手動でdragDropManager作成し（ DragDropContextが内部で行うのと同じように）、すべてのReactTagインスタンスに同じインスタンスを使用できることです。 context定義されたマネージャー。

私はあなたのライブラリからこのようなものをエクスポートすることを意味します：

let defaultManager;
function getDefaultManager() {
    if (!defaultManager) {
        defaultManager = new DragDropManager(HTML5Backend);
    }
    return defaultManager;
}

class ReactTagContext {
    static contextTypes = {
        dragDropManager: PropTypes.object.isRequired
    };

    static childContextTypes = {
        dragDropManager: PropTypes.object.isRequired
    };

    getChildContext() {
        return {
            dragDropManager: this.context.dragDropManager || getDefaultManager()
        };
    }

    render() {
        return <ReactTag {...props} />
    }
}

どうもありがとう、ダン！ これを試して、折り返しご連絡します。 コードを共有していただきありがとうございます：grinning：

問題ありません。このように行う場合は、 ReactTags直接エクスポートするので

だからダン！ それの一体のために、私は上記の複数のエクスポートソリューションを試していました-

// in main component file
module.exports = {
    WithContext: DragDropContext(HTML5Backend)(ReactTags),
    WithOutContext: ReactTags
};

私の他のアプリでは、コンテキストなしでコンポーネントをインポートしようと、非常に嬉しく思います。正常に動作しているようです。

これはハッキーな解決策だと思いますか？私はあなたが提案したことを進める必要がありますか、それともこれをそのままにする必要がありますか？

@ prakhar1989これは、ページ上の複数の<Tags />で機能しますか？

あなたはそこにちょっと私を持っていました！ ：stuck_out_tongue：

ありがたいことにそれは動作します！

うーん、それなら大丈夫かもしれません;-)。 このアプローチで問題が発生した場合はお知らせください。

しましょう！ いつもお世話になっております。

PS： WithContextとWithoutContextより良い命名のアイデアはありますか？

@ prakhar1989おそらく、 WithContextバージョンを直接エクスポートし、静的フィールドとしてNoContextを配置します。

私は同様の問題に直面していますが、再利用可能なコンポーネントの作成が非常に困難になっているため、そもそもこの制限が存在する理由をよりよく理解したいと思います。 現状では、react-dndを使用する各コンポーネントは、アプリケーションに存在する可能性のあるさまざまなコンテキストを認識し、それに応じて処理する必要があります。 アプリケーションの残りの部分で他に何が起こっているかに関係なく、各コンポーネントが独自のドラッグ動作/コンテキストを管理できることが望ましいでしょう。

たとえば、いくつかのファイルアップロードコンポーネント、並べ替え可能なメニュー、ドラッグ可能な要素を備えたゲームを含むアプリケーション画面が必要な場合があります。 これらのコンポーネントはそれぞれ、ドラッグイベントを処理する方法が大きく異なり、実際には独自のコンテキストを担当する必要があります。

私の最初の質問は、なぜこれをHTML5Backendコード内で単純に実行しないのですか？

setup() {
    ...

    // Events already setup - do nothing
    if (this.constuctor.isSetUp) return;

    // Don't throw an error, just return above.
    //invariant(!this.constructor.isSetUp, 'Cannot have two HTML5 backends at the same time.');

    this.constructor.isSetUp = true;
    ...
  }

HTML5Backendコード内でこれを単純に実行しないのはなぜですか

これは素晴らしいポイントです。 コンポーネントが複数のバックエンドを検出できる場合、スコープ内の既存のバックエンドにフォールバックするロジックを直接持つことはできませんか？

こんにちは@ gaearon-私の場合を除いて、私もこの問題にDragDropContextでラップしているため、このエラーが発生します。 上記のスレッドに従ってみましたが、ページ上の他のすべてをReactに変換せずに、これらの個別のReactコンポーネントがコンテキストを共有するために何ができるかが完全にはわかりません（理想的ではありません）。 私はES6構文に少し精通していますが、まだES5を使用しているプロジェクトに取り組んでいます。 上から共有DragDropManager概念を適用する方法はありますか？ これまで試しましたが、 dnd-coreため、 DragDropManagerアクセスできないようです。

あなたの助けとこの素晴らしいライブラリに感謝します！

PSそれが重要な場合、私はngReactを使用しています。

@ prakhar1989 @globexdesigns @gaearon

複数が使用されている場合、なぜHTML5バックエンドがバックエンドを再利用できないのか同じことを疑問に思っていますか？ 以前のコメントによると、角度のあるページ内に複数の反応領域があり、相互にDnDできる必要があり、これで壁にぶつかっているため、これは実際にreact-dndを使用できなくしています。

誰かがこれに対する簡単な修正がありますか？ 私は自分の開発で行き詰まっています。

@abobwhiteこれが私がそれを_解決した_方法です。 それは間違いなく素晴らしい解決策ではありませんが、今のところうまくいくようです。

お役に立てれば、

ありがとう、 @ prakhar1989 ！ しかし、1つがコンテキストでラップされ、もう1つが問題を解決しない複数のエクスポートの方法をフォローしていません。 私の問題は、react-dndを使用して別のアプリケーションに埋め込まれる可能性はなく、dnd対応領域全体（いくつかのreactおよび角度コンポーネント/ディレクティブを含む）をreactでラップできないため、コンテキストをそれらだけにラップしようとしていましたDnDをサポートする私のページのreactコンポーネント...上から@gaearonのアプローチを試してみたいのですが、新しいものを作成するためにDragDropManagerにアクセスできません...

私はまったく同じ問題を抱えています。 これによりコンポーネントの再利用性が低下するという@abobwhiteに強く同意します。

このスレッドは、ドキュメントが推奨するように、コンポーネント階層の上位にHTML5BackendとDragDropContext移動することで、不変の問題を解決することにつながりました。

これは奇妙な問題です。 ネストされた並べ替え可能なコンポーネントに取り組んでおり、親コンポーネント内にDragDropContextがネストされています。 スタンドアロンで動作しているようです（ただし、DragDropContextはネストされています）。

しかし、DragDropContextが階層の上で初期化されている別のプロジェクト内でそのコンポーネントを使用すると、このエラーが発生します。

作業中のアプリケーションでこの問題が発生しました。 私はすべてのコンポーネントを完全に制御できたので、 @DragDropContext(HTMLBackend)を使用する代わりに、このコメントの@gaearonコードに非常に近いものを使用して、共有ドラッグを提供するdecoratorを作成することになりました。ドロップコンテキスト。 それは本当にうまくいきます。

同じことが起こったのですが、問題は、 @DragDropContext(HTMLBackend)を使用するComponentAと、 @DragDropContext(HTMLBackend)を使用するComponentBがあること

ComponentBがComponentAにインポートされたため、エラーが発生しました。 私がしなければならなかったのは、ComponentBからDragDropContextを削除することだけで、それは機能しました。

アプリにDrapDropContextが2つあるが、それらが親子ではない場合はどうなりますか？

私の場合：

1. 最初のdndコンテキストを初期化する
2. 2番目のdndコンテキストをシブリングするように初期化します。 💣

2番目のコンポーネントが最初のdndコンポーネント/コンテキストの子ではないため、childContextを確認できません

私の問題を解決するために、私はこのコードでシングルトンを実行しました：

import { DragDropManager } from 'dnd-core';
import HTML5Backend from 'react-dnd-html5-backend';

let defaultManager;

/**
 * This is singleton used to initialize only once dnd in our app.
 * If you initialized dnd and then try to initialize another dnd
 * context the app will break.
 * Here is more info: https://github.com/gaearon/react-dnd/issues/186
 *
 * The solution is to call Dnd context from this singleton this way
 * all dnd contexts in the app are the same.
 */
export default function getDndContext() {
  if (defaultManager) return defaultManager;

  defaultManager = new DragDropManager(HTML5Backend);

  return defaultManager;
}

そして、 DragDropContext(HTML5Backend)を持つ子を持つすべてのコンポーネントで、それらの子からそれを削除し、その親でこれを行います。

import getDndContext from 'lib/dnd-global-context';

const ParentComponent = React.createClass({

  childContextTypes: {
    dragDropManager: React.PropTypes.object.isRequired,
  },

  getChildContext() {
    return {
      dragDropManager: getDndContext(),
    };
  },

  render() {
    return (<ChildComponentWithDndContext />);
  },

重要なのは、 dndコンテキストを一度だけ初期化することだと思います。 どう思いますか？

@andresgutgonありがとう。 それは私にとってもうまくいきます

@andresgutgonのソリューションは素晴らしいですが、 DrapDropContextがcomponentWillUnmount DragDropManagerを破壊しないのは奇妙です。つまり、2つのDrapDropContext使用しない場合です。同時に、しかしむしろ2つの異なるページで-あなたはまだそれらを使用することはできません。 私の場合はあなたのハックを試してみるつもりですが、そのような些細な状況でハックをすることさえ100％奇妙です。

また、任意のアイデアは、なぜ2持つDragDropManagerである何か悪い/間違ったreact-dnd ？

少しクリーンなもう1つのアプローチは、特定のバックエンドのデコレータを生成するモジュールを作成し、必要に応じてデコレータを使用することです。

lib / withDragDropContext.js

import {DragDropContext} from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

export default DragDropContext(HTML5Backend);

components / MyComponent.js

import { Component } from 'react';
import withDragDropContext from '../lib/withDnDContext';

class MyComponent extends Component {

  render() {
    return (
     <div>
       // other children
     </div>
   );
}

export default withDragDropContext(MyComponent);

こんにちは、DragDropContextでラップされたコンポーネントと、DragDropContextを使用する別のコンポーネントがある場合に解決する方法を知っている人はいますか？親子ではなく、隣り合っています...こちらをご覧くださいhttps://github.com/martinnov92/TSCalendar （作業中です-少し面倒です：D）ありがとうございます

私は、react-dndを使用しているreact-mosaicタイリングウィンドウマネージャーと、react-dndも使用している自分のコンポーネントを使用してもまったく同じ問題があると思います。

したがって、これはreact-dndで直接解決されないと推測していますが、適用できる回避策がいくつかあります。

この問題を修正する完全に機能するコードの例はありますか？

@gcorneのソリューションは機能します

こんにちは私は同じ問題を抱えていますが、react-data-gridを使用してreact-big-calendarを追加しようとしています
react-big-calendarを含むコンポーネントを追加した後、「キャッチされないエラー：2つのHTML5バックエンドを同時に持つことはできません」というエラーが発生します。

react-big-calendarはreact-dndとreact-dnd-html5-backendを使用してその問題を解決する方法を教えてください。

こんにちは@szopenkrkこれを試しましたかhttps://github.com/react-dnd/react-dnd/issues/186#issuecomment-232382782 ？
しかし、Dndバックエンドを受け入れるにはreact-big-calendarにプルリクエストを行う必要があると思います

おそらく少し遅すぎますが、私は似ているが少し異なる解決策を考え出しました。 高次のコンポーネントを実装し、それをすべてのDragDropContext対応コンポーネントで使用しました。

コードは次のようになります（TypeScript）：

import * as React from 'react';
import {DragDropContext} from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

// context singleton
let context: Function;

export function withDragDropContext<P>(
    Component: React.ComponentClass<P> | React.StatelessComponent<P>,
): React.ComponentClass<P> {
    // ensure a singleton instance of the context exists
    if (!context) {
        context = DragDropContext<P>(HTML5Backend);
    }

    return context(Component);
}

そして、コンポーネントで次のように使用します。

import * as React from 'react';
import {withDragDropContext} from 'components/WithDragDropContext';

class MyClass extends React.Component<IMyClassProps, {}> {
    // ...
}

export default withDragDropContext<IMyClassProps>(MyClass);

NB
私はまだ試していませんが、宣言中にコンテキスト変数を設定できるはずです。

const context = DragDropContext(HTML5Backend);

次に、 if (!context) {...部分をスキップします。

@codeaidありがとうございます！

@andresgutgonと同じ状況に

なぜ@ guang2013でここの解決策のどれも機能しなかったのですか？

いいえ、まだ解決策はありません。カードをbigCalendarにドラッグしようとしました。カードをdragSourceとして、cardsListをDragAndDropContextとして、カレンダーを別のDragAndDropContextとして作成しました。その後、2つのhtml5backendエラーがスローされました。ここで提供されている方法を使用しますが、誰も私の問題を解決できません。 @andresgutgon 、オンラインのときは、これについて直接話してもいいですか？ 大変感謝いたします。

@ guang2013 react-dndのDragDropContextに依存するライブラリを使用している場合、ライブラリは統合されたdndContextを使用しないため、この手法は機能しません。 react-sortable-treeのような一部のライブラリでは、コンテキストなしでコンポーネントを使用できるため、自分でラップすることができます。

@gcorneのソリューションは、react-hot-loaderを備えたアプリでreact-dndを使用できるようにするために機能しました。 それでも、箱から出してすぐに機能しなかったのには少し驚いています。

古い問題ですが、他の誰かがGoogleからここにたどり着いた場合：

私のページにはDNDプロバイダーが1つしかなく、DNDを持つ他のライブラリを統合していませんでしたが、それでもこのエラーが発生しました。

私の問題は、DragDropContextProviderがReactRouterのBrowserRouter要素内にあることでした。これにより、すべてのナビゲーションでHTML5Backendが再構築され、古いページ（ナビゲートされたページ）と新しいページ（ナビゲートされたページ）の両方にDND要素が含まれていました。上記のエラーが発生します。

解決策は、DragDropContextProviderをBrowserRouterから移動することでした。

これは、ReactDnDを初めて試し、チュートリアルに従って、64平方のチェス盤になってしまった人間のためのものです。
好きなように騎士を引きずり回すことができました。
問題は、 BoardSquareいずれかにドロップしようとしたときに、2HTML5バックエンドの問題でスローされたこと

修正

他の人が以前にコメントで述べたように、 DragDropContextProviderレンダリングをアプリの再レンダリングサイクルの外に移動します。
のように、 observe関数へのコールバックとしてReactDOM.renderを直接実行しないでください。
代わりにこれを行います：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { DragDropContextProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import './index.css';
import App from './App';

ReactDOM.render(
    <DragDropContextProvider backend={HTML5Backend}>
        <App />
    </DragDropContextProvider>,
    document.getElementById('root')
)

App.js

import React, { Component } from 'react';
import Board from './Board';
import { observe } from './Game';

class App extends Component {
    state = {
        knightPosition: [0, 0]
    }

    componentDidMount = () => {
        observe(knightPosition => {
            this.setState(prevState => ({
                ...prevState,
                knightPosition
            }));
        });
    }

    render() {
        return (
            <div className="App">
                <Board knightPosition={this.state.knightPosition} />
            </div>
        );
    }
}

export default App;

これはこの問題に関連していると思います
https://github.com/prakhar1989/react-tags/issues/497

@gaearonこれは古いことは知っていますが、例で実際にDragDropManagerを取得するにはどうすればよいですか？ どこにもエクスポートされません。

defaultManager = new DragDropManager(HTML5Backend);

私の問題は、サードパーティのAPIを介してページにいくつかのウィジェットをレンダリングしていて、実際のウィジェットよりもDragDropContextProvider移動できないことです。

古いビルドを削除することでこの問題を解決しました。
distフォルダーを削除するか、index.htmlを編集するだけです。 正確な問題はわかりませんが、これでうまくいきました

幸い、 @ gcorne （https://github.com/react-dnd/react-dnd/issues/186#issuecomment-282789420）の（隠された）答えを見つけることができました。 トリッキーだと思われていた私の問題を瞬時に解決しました。
@ prakhar1989これは本当のパーティーの答えであり、どういうわけか強調表示する必要があると感じているので、バグの説明にリンクしてください。

私が理解した解決策は、私にとってはうまくいき、HTML5またはTouchバックエンドのいずれかを使用できるようにするものです。

シングルトンHOCコンポーネントを作成します。

import {DragDropContext} from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";
import TouchBackend from "react-dnd-touch-backend";

const DragAndDropHOC = props => {
    return <React.Fragment>
        {props.children}
    </React.Fragment>
};

export default {
    HTML5: DragDropContext(HTML5Backend)(DragAndDropHOC),
    Touch: DragDropContext(TouchBackend)(DragAndDropHOC),
}

次に、プロバイダーコンポーネント：

const DragDrop = props => {
    if (props.isTouch) {
        return <DragDropContext.Touch>{props.children}</DragDropContext.Touch>
    } else {
        return <DragDropContext.HTML5>{props.children}</DragDropContext.HTML5>
    }
};

そして、必要な場所で<DragDrop isTouch={props.isTouch} />使用します。

同じ問題に遭遇した開発者のために、このHOCソリューションを見ることができます

私は今、Jestテストでこの問題に直面しています。 HTML5-バックエンドは、Jestテスト全体でシングルトンのように扱われます（これが問題が発生している理由です...私は思います）

SOの詳細な問題：

https://stackoverflow.com/questions/58077693/multiple-react-dnd-jest-tests-cannot-have-two-html5-backends-at-the-same-time

フックの使用

import { createDndContext } from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";

const manager = useRef(createDndContext(HTML5Backend));

return (
  <DndProvider manager={manager.current.dragDropManager}>
      ....
  </DndProvider>
)

フックを使用したより良い解決策（@jchondeに感謝）：

import { DndProvider, createDndContext } from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";
import React, { useRef } from "react";

const RNDContext = createDndContext(HTML5Backend);

function useDNDProviderElement(props) {
  const manager = useRef(RNDContext);

  if (!props.children) return null;

  return <DndProvider manager={manager.current.dragDropManager}>{props.children}</DndProvider>;
}

export default function DragAndDrop(props) {
  const DNDElement = useDNDProviderElement(props);
  return <React.Fragment>{DNDElement}</React.Fragment>;
}

したがって、他の場所で使用できます。

import DragAndDrop from "../some/path/DragAndDrop";

export default function MyComp(props){
   return <DragAndDrop>....<DragAndDrop/>
}

私の解決策：
子コンポーネントがreact-dnd直接インポートしないようにします。
DragDropContextとHTML5Backendを親から子コンポーネントに渡します。

DragDropContextProviderタグに一意のキーを追加すると、問題<DragDropContextProvider backend＝{HTML5Backend} key＝{Math. random()}></DragDropContextProvider>

タイプスクリプトでは、以下のコンポーネントを作成しました。 （ @jchonde @ttessaroloに感謝します）

import { DndProvider, createDndContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import React, { PropsWithChildren, useRef } from 'react';

const RNDContext = createDndContext(HTML5Backend);

function DragAndDrop({ children }: PropsWithChildren<{}>): JSX.Element {
  const manager = useRef(RNDContext);
  return <DndProvider manager={manager.current.dragDropManager}>{children}</DndProvider>;
}

export default DragAndDrop;

そして、このようなコンポーネントを使用しました

function SomeComponent(): JSX.Element {
  return (
    <DragAndDrop>
      ...
    </DragAndDrop>
  );
}

DragDropContextProviderタグに一意のキーを追加すると、問題<DragDropContextProvider backend＝{HTML5Backend} key＝{Math. random()}></DragDropContextProvider>

よくやった！