React-dnd: A fonte de arrasto não está renderizando nada

A mesma coisa está acontecendo comigo, embora eu esteja usando a sintaxe 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);

Usando:

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

Esperado: veja o componente renderizado e os logs do console
Real: nada é renderizado; nada está logado

Adicionar o componente do provedor na raiz do meu aplicativo resolveu o problema.

Eu acho, no entanto - deve ser claramente observado no código de exemplo que é necessário - pensei que ver o exemplo fosse o suficiente para entender como começar a usar a biblioteca

Acho que o problema é esta if -declaração:
https://github.com/react-dnd/react-dnd/blob/934efc81871f30c6038e2dc52be1504fe38132e7/packages/react-dnd/src/decorateHandler.tsx#L210

Parece que desativa uma verificação que, de outra forma, geraria um erro se não houvesse contexto.

Tive que adicionar o provedor conforme mostrado abaixo:

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

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

Fyi: Acabei de encontrar o problema ao usar Portals e corrigi-lo substituindo a API ReactDOM.unstable_renderSubtreeIntoContainer desatualizada por ReactDOM.createPortal .

Por que não gastei muito tempo tentando solucionar o problema de renderização, encontrei a resposta aqui, faça sua amostra com seriedade, obrigado

Parece estar presente no React 16.8.1, meu gerente nunca é criado e o Context.Consumer dentro de DragSource nunca renderiza nenhum filho.

Isso não está em nenhum lugar na seção de início rápido dos documentos.

Esta é praticamente a primeira coisa que deveria estar nos documentos ...

O mesmo problema aqui, mas apenas em certas compilações de produção (certifiquei-me de que DragDropContextProvider estava presente em minha árvore). Notei que ao usar as ferramentas de desenvolvimento de reação, DragDropContextProvider é perdido e aparece como Unknown na árvore de componentes (veja a imagem)

Fazendo downgrade de v7.3.2 para

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

conserta para mim.

Eu também encontrei o mesmo bug.
Exibido em desenvolvimento, mas não em produção.

É meu ambiente.

• "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 é desconhecido

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.

Alguém sabe se isso foi resolvido antes de ser fechado automaticamente?

Como eu resolvi
No meu caso, tudo funcionou bem no desenvolvimento, mas completamente quebrado na produção.

O problema foi originado pelo caminho de importação useDrag ...

Não funciona importação
import {useDrag} from "react-dnd/lib/index";

Trabalho de importação
import {useDrag} from "react-dnd";

Dito isso, realmente não sei como se originou a primeira importação.

Além disso, posso dizer com segurança que você não precisa importar o DndProvider na raiz do aplicativo . Eu fiz isso antes para descobrir que o problema foi originado pela importação, mas após a "correção" da importação, restaurei o DndProvider em um dos componentes em vez da raiz do aplicativo (para um código mais limpo) e isso funciona multar.

Contexto:

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

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.

alguma solução ainda? nada sugerido neste tópico ajudou.

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

tudo funciona bem apenas quando eu mudo a posição do estado, eu não posso ver a renderização enquanto posso ver as mudanças nos logs do console.