React-dnd: La source de glissement n'est pas du tout rendue

La même chose m'arrive, bien que j'utilise la syntaxe ES6 :

import React, { Component } from "react";
import { DragSource } from "react-dnd";
import PropTypes from "prop-types";

import "./Dictionary.css";

const propTypes = {
  entry: PropTypes.object.isRequired,

  // Injected by React DnD:
  isDragging: PropTypes.bool.isRequired,
  connectDragSource: PropTypes.func.isRequired
};

const TYPES = {
  ROW: "row"
};

/**
 * Implements the drag source contract.
 */
const rowSource = {
  beginDrag(props) {
    console.log(props);
    return {
      entry: props.entry
    };
  }
};

/**
 * Specifies the props to inject into your component.
 */
function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
}

class Row extends Component {
  constructor(props) {
    console.log("here");
    super(props);
    this.state = {
      entry: props.entry
    };
  }

  static getDerivedStateFromProps = (props, state) => {
    return {
      entry: props.entry
    };
  };

  render() {
    const { isDragging, connectDragSource } = this.props;
    const { entry } = this.state;

    console.log("dragging:", isDragging);
    return connectDragSource(
      <div style={{ opacity: isDragging ? 0.5 : 1 }} className="row">
        <div>{entry.string}</div>
        <div>{entry.kMandarin}</div>
        <div>{entry.kDefinition}</div>
      </div>
    );
  }
}

Row.propTypes = propTypes;

export default DragSource(TYPES.ROW, rowSource, collect)(Row);

Utilisant:

    "react-dnd-html5-backend": "^5.0.1",
    "react-dom": "^16.5.1",

Attendu : voir les journaux rendus des composants et de la console
Réel : rien n'est rendu ; rien n'est enregistré

L'ajout d'un composant de fournisseur à la racine de mon application a résolu le problème.

Je pense cependant - il devrait être clairement indiqué dans l'exemple de code que c'est nécessaire - je pensais que voir l'exemple était suffisant pour comprendre comment commencer à utiliser la bibliothèque

Je pense que le problème est cette déclaration if :
https://github.com/react-dnd/react-dnd/blob/934efc81871f30c6038e2dc52be1504fe38132e7/packages/react-dnd/src/decorateHandler.tsx#L210

Il semble que cela désactive une vérification qui sinon lancerait une erreur s'il n'y a pas de contexte.

J'ai dû ajouter le fournisseur comme indiqué ci-dessous :

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

<DragDropContextProvider backend={HTML5Backend}>
 <App/>
</DragDropContextProvider>

fyi: Je viens de rencontrer le problème lors de l'utilisation de Portals et je l'ai résolu en remplaçant l'API ReactDOM.unstable_renderSubtreeIntoContainer obsolète par ReactDOM.createPortal .

Pourquoi n'ai-je pas passé beaucoup de temps à résoudre les problèmes de rendu, j'ai trouvé la réponse ici, veuillez faire votre échantillon sérieusement, merci

Semble être présent contre React 16.8.1, mon gestionnaire n'est jamais créé et le Context.Consumer à l'intérieur du DragSource ne rend jamais d'enfants.

Ce n'est nulle part dans la section Démarrage rapide des documents.

C'est pratiquement la première chose qui devrait être dans la doc...

Même problème ici mais uniquement sous certaines versions de production (je me suis assuré que le DragDropContextProvider était présent dans mon arbre). J'ai remarqué que lors de l'utilisation des outils de développement de réaction, le DragDropContextProvider est perdu et apparaît sous la forme Unknown dans l'arborescence des composants (voir capture d'écran)

Rétrogradation de la v7.3.2 à

• "react-dnd": "7.1.0",
• "react-dnd-html5-backend": "7.1.0"

le répare pour moi.

J'ai également rencontré le même bug.
Affiché en développement mais pas en production.

C'est mon environnement.

• "réagir-dnd"： "7.1.0"、
• "react-dnd-html5-backend"： "7.1.0"

const render = () => {
  ReactDOM.render(
    <DragDropContextProvider backend={HTML5Backend}>
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <AppContainer>
            <App />
          </AppContainer>
        </ConnectedRouter>
      </Provider>
    </DragDropContextProvider>,
    document.getElementById('app')
  );
};

DragDropContextProvider est inconnu

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.

Quelqu'un sait si cela a été résolu avant qu'il ne soit automatiquement fermé ?

Comment j'ai résolu
Dans mon cas, tout a bien fonctionné en développement, mais complètement cassé en production.

Le problème provenait du chemin d' importation

L'importation ne fonctionne pas
import {useDrag} from "react-dnd/lib/index";

Importation de travail
import {useDrag} from "react-dnd";

Cela dit, je ne sais vraiment pas comment la première importation est née.

De plus, je peux dire en toute sécurité que vous n'avez pas besoin d'importer le DndProvider dans la racine de l'application . Je l'ai déjà fait pour découvrir que le problème provenait de l'importation, mais après le "correctif" de l'importation, j'ai restauré le DndProvider dans l'un des composants au lieu de la racine de l'application (pour un code plus propre) et cela fonctionne amende.

Le contexte:

• "réagir": "^16.8.3",
• "react-dnd": "^9.0.1",
• "react-dnd-html5-backend": "^9.0.0",

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.

une solution encore? rien de suggéré dans ce sujet n'a aidé.

"react-dnd": "^11.1.3",
"react-dnd-html5-backend": "^11.1.3",

tout fonctionne bien uniquement lorsque je change la position de l'état, je ne peux pas voir le rendu alors que je peux voir les changements dans les journaux de la console.