React-dnd: Impossible d'avoir deux backends HTML5 en même temps

Consultez la source de DragDropContext . Je pense que vous devriez pouvoir réutiliser le gestionnaire existant s'il est spécifié par un composant au-dessus de l'arbre. Mais c'est toujours une question délicate .. Avez-vous des solutions proposées?

Je pense que vous devriez pouvoir réutiliser le gestionnaire existant s'il est spécifié par un composant au-dessus de l'arbre.

Même si cela est possible, le composant exporté doit également pouvoir fonctionner indépendamment, et dans les cas où le backend existe (dans l'application où le composant est utilisé) quelque part en haut de la chaîne, il doit être réutilisé. Je vais essayer de lire la source et voir si cela peut être retiré.

Malheureusement, la seule solution à laquelle je peux penser pour le moment est d'exporter le composant final tel quel et d'attendre que l'utilisateur ajoute un DragDropContext avec un backend de son choix. Qu'est-ce que tu penses?

le composant exporté doit également pouvoir fonctionner indépendamment, et dans les cas où le backend existe (dans l'application où le composant est utilisé) quelque part en haut de la chaîne, il doit être réutilisé.

Oui, cela est possible en n'utilisant pas complètement DragDropContext et en utilisant manuellement dragDropManager dans le contexte. Votre composant peut examiner le contexte et soit transmettre le dragDropManager existant dans le contexte, soit créer le sien. Cela semble cependant un peu fragile.

Malheureusement, la seule solution à laquelle je peux penser pour le moment est d'exporter le composant final tel quel et d'attendre que l'utilisateur ajoute un DragDropContext avec un backend de son choix. Qu'est-ce que tu penses?

Je pense que c'est la solution la plus flexible. Vous pouvez également y être avisé et exporter <MyComponentContext> qui s'applique DragDropContext(HTML5Backend) .

export <MyComponentContext> qui s'applique DragDropContext(HTML5Backend)

Je suis désolé, je ne comprends pas tout à fait cela. Pouvez-vous clarifier cela un peu plus?

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

et vous pouvez dire aux utilisateurs d'encapsuler leur composant de niveau supérieur dans MyTagControlContext ou d'utiliser DragDropContext directement s'ils utilisent _déjà_ React DnD.

Ah! Que dis-tu de ça? Est-ce que ça a l'air trop moche?

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

L'utilisation peut alors être quelque chose comme

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.

Je ne pense pas que cela fonctionnerait car chaque <ReactTags> obtiendrait sa propre copie du backend et conduirait à l'erreur invariante que vous avez collée ci-dessus car ces backends gèrent les mêmes événements de fenêtre globaux.

Ce que je pense que cela fonctionnera, c'est que vous pouvez créer manuellement dragDropManager (tout comme DragDropContext fait en interne) et utiliser la même instance pour toutes les instances ReactTag - avec un retour au gestionnaire défini dans context .

Je veux dire exporter quelque chose comme ça depuis votre bibliothèque:

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} />
    }
}

Merci beaucoup, Dan! Je vais essayer et vous recontacter. Merci d'avoir partagé le code: souriant:

Pas de problème. Si vous le faites comme ça, exportez simplement cette classe au lieu d'exporter ReactTags directement. Il doit être utilisable "tel quel", sans emballage ni décorateur.

Alors Dan! Pour le plaisir, j'essayais la solution d'exportations multiples ci-dessus -

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

Dans mon autre application, j'ai essayé d' importer le composant sans le contexte et à mon grand plaisir, cela semble bien fonctionner!

Pensez-vous que c'est une solution piratée et que je devrais aller de l'avant avec ce que vous avez proposé ou devrais-je laisser cela être?

@ prakhar1989 Êtes-vous sûr que cela fonctionne avec plusieurs <Tags /> sur la page?

Vous m'avez eu une seconde là-bas! : stuck_out_tongue:

Heureusement, cela fonctionne!

Hmm, alors peut-être que ça va ;-). Faites-moi savoir si vous rencontrez des problèmes avec cette approche!

Ça ira! Merci encore pour toute votre aide.

PS: Avez-vous de meilleures idées de nommage pour WithContext et WithoutContext ?

@ prakhar1989 J'exporterais probablement la version WithContext directement, et y placerais NoContext comme champ statique.

Je rencontre un problème similaire et j'aimerais mieux comprendre pourquoi cette limitation existe en premier lieu parce qu'elle rend l'écriture de composants réutilisables assez difficile. Dans l'état actuel des choses, chaque composant qui utilise react-dnd doit connaître les différents contextes pouvant exister dans l'application et les gérer en conséquence. Il serait préférable que chaque composant puisse gérer son propre comportement / contexte de glissement indépendamment de ce qui peut se passer dans le reste de l'application.

Par exemple, je peux vouloir avoir un écran d'application qui a plusieurs composants de téléchargement de fichier, un menu triable et un jeu avec des éléments déplaçables. Chacun de ces composants a des façons très différentes de gérer les événements de traînée et devrait vraiment être en charge de son propre contexte.

Ma première question est pourquoi ne pas simplement faire cela dans le code 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;
    ...
  }

pourquoi ne pas simplement le faire dans le code HTML5Backend

Ceci est un excellent point. Si le composant est capable de détecter plusieurs backends, ne peut-il pas avoir directement la logique de revenir au backend existant dans la portée?

Salut @gaearon - Je rencontre également ce problème, sauf dans mon cas, j'ai une page dans laquelle j'ai rassemblé des composants de réaction disparates dans un modèle angulaire en raison de performances (angulaires). Ce que j'ai, c'est une page qui construit des questions, des choix et plus encore dans une arborescence récursive. J'ai également une barre d'outils et une bibliothèque de questions qui utilisent DnD pour ajouter des éléments à l'arbre des questions. Mon problème est que j'ai maintenant configuré plusieurs composants de réaction qui vivent dans un contexte angulaire. Pour cette raison, j'encapsule chacun de ceux-ci avec un DragDropContext qui provoque cette erreur. J'ai essayé de suivre le fil de discussion ci-dessus, mais je ne vois pas tout à fait clairement ce que je pourrais faire pour que ces composants de réaction séparés partagent un contexte sans convertir tout le reste de ma page en React (pas idéal). Je connais un peu la syntaxe ES6 mais je travaille sur un projet qui utilise toujours ES5. Existe-t-il un moyen d'appliquer le concept partagé DragDropManager ci-dessus? Je l'ai essayé jusqu'à présent et je ne semble pas avoir accès à DragDropManager car il est dans dnd-core

Merci pour votre aide et pour cette superbe bibliothèque!

PS Si cela compte, j'utilise ngReact.

@ prakhar1989 @globexdesigns @gaearon

Je me demande la même chose pourquoi le backend HTML5 ne peut pas simplement réutiliser le backend si plusieurs sont utilisés? Selon mon commentaire précédent, cela rend vraiment react-dnd inutilisable pour moi car j'ai plusieurs zones de réaction dans une page angulaire qui doivent pouvoir se DnD entre elles et je heurte un mur avec cela.

Quelqu'un a-t-il une solution rapide pour cela? Je suis à l'arrêt dans mon développement.

@abobwhite Voici comment je l'ai _solu_. Ce n'est certainement pas une excellente solution, mais cela semble fonctionner à partir de maintenant.

J'espère que cela t'aides,

Merci, @ prakhar1989 ! Mais je ne suis pas en train de suivre la façon dont l'exportation multiple avec un enveloppé de contexte et l'autre ne résout pas le problème. Mon problème n'est pas d'être potentiellement intégré dans une autre application avec react-dnd, mais plutôt de ne pas pouvoir envelopper toute ma zone activée par dnd (avec plusieurs composants / directives de réaction et angulaires) en react, alors j'essayais d'envelopper le contexte autour de ceux-ci réagit aux composants de ma page qui prennent en charge DnD ... J'adorerais essayer l'approche de @gaearon par le haut mais je n'ai pas accès au DragDropManager pour en créer un nouveau ...

J'ai exactement le même problème. Je suis tout à fait d'accord avec @abobwhite pour

Ce fil de discussion m'a amené à résoudre mon problème invariant en déplaçant les HTML5Backend et DragDropContext plus haut dans ma hiérarchie de composants, tout comme le recommandent la documentation .

C'est un problème étrange. Je travaille sur un composant réorganisable imbriqué et j'ai DragDropContext imbriqué dans le composant parent. Il semble fonctionner de manière autonome (mais il a toujours DragDropContext imbriqué).

Mais lorsque j'utilise ce composant dans un autre projet dont DragDropContext est initialisé au-dessus de la hiérarchie, j'obtiens cette erreur.

J'ai rencontré ce problème avec une application sur laquelle je travaille. J'avais un contrôle total sur tous les composants donc j'ai fini par utiliser @DragDropContext(HTMLBackend) J'ai fini par utiliser quelque chose de très proche du code @gaearon dans ce commentaire pour créer un decorator qui donnerait un glisser partagé déposer le contexte. Cela fonctionne vraiment bien.

J'ai juste eu la même chose qui m'est arrivée et le problème était que j'avais ComponentA qui utilisait @DragDropContext(HTMLBackend) puis ComponentB qui avait aussi @DragDropContext(HTMLBackend) .

ComponentB a été importé dans ComponentA, ce qui a causé l'erreur pour moi. Tout ce que j'avais à faire était de supprimer le DragDropContext de ComponentB et cela a fonctionné.

Que faire s'il y a 2 DrapDropContext dans l'application mais qu'ils ne sont pas parent et enfant?

Mon cas:

1. Initialiser le premier contexte dnd
2. Initialisez comme sibbling un second contexte dnd. 💣

Je ne peux pas vérifier childContext car le deuxième composant n'est pas un enfant du premier composant / contexte dnd

Pour résoudre mon problème, j'ai fait un singleton avec ce code:

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;
}

Et puis dans tous les composants qui ont un enfant qui avait DragDropContext(HTML5Backend) je le supprime de ces enfants et de leurs parents je fais ceci:

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

const ParentComponent = React.createClass({

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

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

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

Je pense que la clé est que je n'initialise le contexte dnd qu'une seule fois. Qu'est-ce que tu penses?

@andresgutgon merci. Ça marche pour moi aussi

@andresgutgon votre solution est géniale, mais c'est bizarre que DrapDropContext ne détruit pas DragDropManager sur componentWillUnmount , c'est-à-dire si vous n'utilisez pas 2 DrapDropContext s en même temps, mais plutôt sur 2 pages différentes - vous ne pouvez toujours pas les utiliser. Je vais essayer votre hack dans mon cas, mais c'est toujours 100% bizarre d'avoir même des hacks pour une situation aussi triviale.

Aussi une idée pourquoi avoir 2 DragDropManager est quelque chose de mauvais / faux dans react-dnd ?

Une autre approche un peu plus propre consiste à créer un module qui génère le décorateur pour un backend particulier, puis à utiliser le décorateur si nécessaire:

lib / withDragDropContext.js

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

export default DragDropContext(HTML5Backend);

composants / 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);

Bonjour, est-ce que quelqu'un sait comment résoudre lorsque vous avez un composant encapsulé dans DragDropContext, puis un autre composant qui utilise également DragDropContext, mais ce composant (react big calendar) est un package npm, alors supprimez-le de là n'est pas une solution et ils sont côte à côte, pas parent-enfant ... vous pouvez jeter un œil ici https://github.com/martinnov92/TSCalendar (c'est un travail en cours - donc c'est un peu brouillon: D) merci

Je crois que j'ai exactement le même problème avec l'utilisation du gestionnaire de fenêtres de mosaïque react

Je suppose donc que cela n'est pas résolu directement dans react-dnd, mais il existe des solutions de contournement que nous pouvons appliquer.

existe-t-il un exemple de code fonctionnel complet qui résout ce problème?

La solution de @gcorne fonctionne

Salut, j'ai le même problème mais nous utilisons react-data-grid et essayons d'ajouter react-big-calendar
Après avoir ajouté un composant qui inclut react-big-calendar, nous avons l'erreur "Erreur non interceptée: impossible d'avoir deux backends HTML5 en même temps."

react-big-calendar utiliser react-dnd et react-dnd-html5-backend comment résoudre ce problème?

Salut @szopenkrk avez-vous essayé ceci https://github.com/react-dnd/react-dnd/issues/186#issuecomment -232382782?
Mais je pense que vous auriez besoin de faire une pull request pour react-big-calendar pour accepter un backend Dnd

Probablement un peu trop tard, mais j'ai trouvé une solution similaire mais légèrement différente. J'ai implémenté un composant d'ordre supérieur et je l'utilise simplement dans tous mes composants prenant en charge DragDropContext.

Le code ressemble à ceci (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);
}

Et puis utilisez-le comme suit dans vos composants:

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

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

export default withDragDropContext<IMyClassProps>(MyClass);

NB
Je n'ai pas encore essayé mais vous devriez probablement être en mesure de remplir la variable de contexte lors de la déclaration:

const context = DragDropContext(HTML5Backend);

puis sautez la partie if (!context) {... .

@codeaid Merci!

J'ai rencontré la même situation que @andresgutgon , mais je

Pourquoi n'a fonctionné @ guang2013 aucune des solutions ici?

Non, toujours pas de solutions, je ne sais pas, j'ai essayé de faire glisser la carte dans bigCalendar, et j'ai fait la carte comme dragSource et la cardsList comme DragAndDropContext, le calendrier comme un autre DragAndDropContext, puis deux erreurs html5backend jetées, j'ai essayé pour utiliser n'importe quelle méthode fournie ici mais personne ne peut résoudre mon problème. @andresgutgon , quand êtes-vous en ligne, puis-je vous en parler directement? Très appréciée.

@ guang2013 si vous utilisez une bibliothèque qui dépend de DragDropContext de react-dnd, cette technique ne fonctionnera pas car la bibliothèque n'utilisera pas votre dndContext unifié. Certaines bibliothèques comme react-sortable-tree vous permettront d'utiliser les composants sans contexte afin que vous puissiez les encapsuler vous-même.

La solution de @gcorne a fonctionné pour moi pour permettre l'utilisation de react-dnd dans une application avec react-hot-loader. Pourtant, je suis un peu surpris que cela n'ait pas fonctionné dès la sortie de la boîte!

Ancien problème, mais au cas où quelqu'un d'autre se retrouverait ici de Google:

Je n'avais qu'un seul fournisseur DND sur ma page, je n'intégrais aucune autre bibliothèque qui a DND, mais j'ai quand même fini par rencontrer cette erreur, un peu au hasard.

Mon problème était que le DragDropContextProvider était à l'intérieur de l'élément BrowserRouter de ReactRouter, ce qui permettait de reconstruire le HTML5Backend à chaque navigation, et si l'ancienne page (qui a été parcourue loin de) et la nouvelle (celle vers laquelle navigué) avaient des éléments DND, l'erreur ci-dessus se produirait.

La solution consistait à déplacer le DragDropContextProvider hors de BrowserRouter.

Celui-ci est destiné aux mortels qui ont essayé ReactDnD pour la première fois, ont suivi le tutoriel et se sont retrouvés avec un échiquier de 64 carrés.
Je pourrais traîner mon chevalier à ma guise.
Le problème était lorsque j'ai essayé de le déposer dans l'un des BoardSquare , il a vomi avec le 2 problème de backend HTML5.

Le correctif

Comme d'autres l'ont déjà mentionné dans les commentaires, déplacez le rendu DragDropContextProvider en dehors du cycle
Comme dans, ne faites pas directement un ReactDOM.render comme rappel de la fonction observe .
Faites plutôt ceci:

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;

Je pense que cela est lié à ce problème
https://github.com/prakhar1989/react-tags/issues/497

@gaearon Je sais que c'est vieux, mais comment puis-je mettre la main sur DragDropManager dans votre exemple? Il n'est exporté nulle part.

defaultManager = new DragDropManager(HTML5Backend);

Mon problème est que je rend quelques widgets sur une page via une API tierce, et je ne peux pas déplacer DragDropContextProvider plus haut que mon widget actuel.

Résolu ce problème en supprimant l'ancienne version.
supprimez simplement le dossier dist ou modifiez index.html. Je ne connais pas le problème exact mais cela a fonctionné pour moi

Heureusement, j'ai pu trouver la réponse (cachée) de @gcorne (https://github.com/react-dnd/react-dnd/issues/186#issuecomment-282789420). Cela a résolu mon problème - qui était supposé délicat - instantanément.
@ prakhar1989 J'ai le sentiment que c'est une vraie réponse de groupe et qu'elle devrait être mise en évidence d'une manière ou d'une autre, alors peut-être la lier dans la description du bogue?

La solution que j'ai trouvée qui fonctionne pour moi et me permet d'utiliser le backend HTML5 ou Touch est:

Créez un composant HOC singleton:

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),
}

Puis un composant fournisseur:

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

Et utilisez <DragDrop isTouch={props.isTouch} /> partout où j'en ai besoin.

Pour les développeurs qui rencontrent le même problème, vous pouvez jeter un œil à cette solution HOC

Je rencontre ce problème maintenant avec les tests Jest. HTML5-Backend est traité comme un singleton à travers les tests Jest (c'est pourquoi le problème se produit ... je pense)

Problème détaillé dans SO:

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

Utiliser des crochets

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

const manager = useRef(createDndContext(HTML5Backend));

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

Une meilleure solution utilisant Hooks (merci @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>;
}

alors vous pouvez utiliser ailleurs:

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

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

Ma solution:
Faites en sorte que le composant enfants n'importe pas directement react-dnd .
Passez les composants DragDropContext et HTML5Backend du parent aux enfants.

L'ajout d'une clé unique à la balise DragDropContextProvider résout le problème <DragDropContextProvider backend＝{HTML5Backend} key＝{Math. random()}></DragDropContextProvider>

Dans le manuscrit, j'ai créé le composant ci-dessous. (merci @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;

Et utilisé un composant comme celui-ci

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

L'ajout d'une clé unique à la balise DragDropContextProvider résout le problème <DragDropContextProvider backend＝{HTML5Backend} key＝{Math. random()}></DragDropContextProvider>

bon travail!