React-dnd: Drag-Source wird überhaupt nicht gerendert

Bei mir passiert das Gleiche, obwohl ich die ES6-Syntax verwende:

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

Verwendung:

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

Erwartet: Siehe gerenderte Komponenten- und Konsolenprotokolle
Tatsächlich: nichts wird gerendert; nichts ist protokolliert

Das Hinzufügen einer Anbieterkomponente im Stammverzeichnis meiner App hat das Problem behoben.

Ich denke jedoch - es sollte im Beispielcode deutlich vermerkt werden, dass er benötigt wird - ich dachte, ein Beispiel zu sehen, reicht aus, um zu verstehen, wie man mit der Verwendung der Bibliothek beginnt

Ich denke, das Problem ist diese if -Anweisung:
https://github.com/react-dnd/react-dnd/blob/934efc81871f30c6038e2dc52be1504fe38132e7/packages/react-dnd/src/decorateHandler.tsx#L210

Es sieht so aus, als ob es eine Prüfung deaktiviert, die ansonsten einen Fehler auslöst, wenn kein Kontext vorhanden ist.

Ich musste den Anbieter wie unten gezeigt hinzufügen:

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

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

Zur Info: Ich bin gerade auf das Problem bei der Verwendung von Portalen gestoßen und habe es behoben, indem ich die veraltete ReactDOM.unstable_renderSubtreeIntoContainer API durch ReactDOM.createPortal .

Warum habe ich nicht viel Zeit damit verbracht, den Rendering-Grund zu beheben, habe die Antwort hier gefunden, bitte mach dein Beispiel ernsthaft, danke

Scheint gegen React 16.8.1 vorhanden zu sein, mein Manager wird nie erstellt und der Context.Consumer innerhalb von DragSource rendert keine Kinder.

Dies steht nirgendwo im Abschnitt "Schnellstart" der Dokumente.

Das ist praktisch das Erste, was in den Dokumenten stehen sollte...

Gleiches Problem hier, aber nur unter bestimmten Produktions-Builds (ich habe sichergestellt, dass DragDropContextProvider in meinem Baum vorhanden war). Mir ist aufgefallen, dass bei Verwendung der React Dev Tools das DragDropContextProvider verloren geht und als Unknown im Komponentenbaum erscheint (siehe Screenshot)

Downgrade von v7.3.2 auf

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

behebt es für mich.

Ich bin auch auf den gleichen Fehler gestoßen.
Wird in der Entwicklung angezeigt, aber nicht in der Produktion.

Es ist meine Umgebung.

• "react-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 ist unbekannt

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität hatte. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.

Weiß jemand, ob das gelöst wurde, bevor es automatisch geschlossen wird?

Wie habe ich gelöst
In meinem Fall funktionierte alles gut in der Entwicklung, aber in der Produktion völlig kaputt.

Das Problem wurde durch den useDrag-Importpfad verursacht ...

Importieren funktioniert nicht
import {useDrag} from "react-dnd/lib/index";

Arbeitsimport
import {useDrag} from "react-dnd";

Allerdings weiß ich wirklich nicht, wie der erste Import entstanden ist.

Außerdem kann ich mit Sicherheit sagen, dass Sie den DndProvider nicht in das App-Stammverzeichnis importieren müssen . Ich habe das schon einmal gemacht, um festzustellen, dass das Problem durch den Import verursacht wurde, aber nach dem Import "Fix" habe ich den DndProvider in einer der Komponenten anstelle des App-Roots wiederhergestellt (für einen saubereren Code) und das funktioniert fein.

Kontext:

• "reagieren": "^16.8.3",
• "react-dnd": "^9.0.1",
• "react-dnd-html5-backend": "^9.0.0",

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität hatte. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.

schon eine lösung? nichts, was in diesem Thema vorgeschlagen wurde, hat geholfen.

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

Alles funktioniert gut, nur wenn ich die Statusposition ändere, kann ich das Rendering nicht sehen, während ich die Änderungen in den Konsolenprotokollen sehe.