React-dnd: La fuente de arrastre no se renderiza en absoluto

A mí me está pasando lo mismo, aunque estoy usando la sintaxis de 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);

Utilizando:

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

Esperado: ver los registros de la consola y el componente renderizado
Actual: no se representa nada; no se registra nada

Agregar el componente de proveedor en la raíz de mi aplicación resolvió el problema.

Sin embargo, creo que debería indicarse claramente en el código de ejemplo que es necesario, pensé que ver el ejemplo es suficiente para entender cómo empezar a usar la biblioteca.

Creo que el problema es esta if -statement:
https://github.com/react-dnd/react-dnd/blob/934efc81871f30c6038e2dc52be1504fe38132e7/packages/react-dnd/src/decorateHandler.tsx#L210

Parece que deshabilita una verificación que, de lo contrario, arrojaría un error si no hay contexto.

Tuve que agregar el proveedor como se muestra a continuación:

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

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

fyi: Acabo de encontrar el problema al usar Portals y lo solucioné reemplazando la API ReactDOM.unstable_renderSubtreeIntoContainer obsoleta con ReactDOM.createPortal .

¿Por qué no dediqué mucho tiempo a solucionar problemas de renderización? Encontré la respuesta aquí. Por favor, haga su muestra en serio, gracias.

Parece estar presente en React 16.8.1, mi administrador nunca se crea y el Context.Consumer dentro de DragSource nunca representa a ningún niño.

Esto no se encuentra en ninguna parte de la sección Inicio rápido de los documentos.

Esto es prácticamente lo primero que debería estar en los documentos ...

El mismo problema aquí, pero solo en ciertas compilaciones de producción (me aseguré de que DragDropContextProvider estuviera presente en mi árbol). Me di cuenta de que al usar las herramientas de desarrollo de reacción, el DragDropContextProvider se pierde y aparece como Unknown en el árbol de componentes (ver captura de pantalla)

Bajando de v7.3.2 a

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

me lo arregla.

También encontré el mismo error.
Se muestra en desarrollo pero no en producción.

Es mi entorno.

• "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 es desconocido

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

¿Alguien sabe si eso se ha resuelto antes de que se cierre automáticamente?

Como he resuelto
En mi caso, todo funcionó bien en desarrollo, pero completamente roto en producción.

El problema se originó en la ruta de importación

No funciona la importación
import {useDrag} from "react-dnd/lib/index";

Importación de trabajo
import {useDrag} from "react-dnd";

Dicho esto, realmente no sé cómo se originó la primera importación.

Además, puedo decir con seguridad que no es necesario importar el DndProvider en la raíz de la aplicación . Lo hice antes para descubrir que el problema se originó en la importación, pero después de la "corrección" de la importación, restauré el DndProvider en uno de los componentes en lugar de la raíz de la aplicación (para un código más limpio) y eso funciona multa.

Contexto:

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

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

alguna solución todavía? nada de lo sugerido en este tema ayudó.

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

todo funciona bien solo cuando cambio la posición del estado, no puedo ver el renderizado mientras puedo ver los cambios en los registros de la consola.