React-dnd: Источник перетаскивания вообще не отображается

То же самое происходит и со мной, хотя я использую синтаксис 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);

С использованием:

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

Ожидается: просмотреть журналы визуализированного компонента и консоли
Актуально: ничего не отображается; ничего не регистрируется

Добавление компонента поставщика в корень моего приложения решило проблему.

Я думаю, однако - в примере кода следует четко указать, что он нужен - я думал, что увидеть пример достаточно, чтобы понять, как начать использовать библиотеку.

Я думаю, проблема в следующем if -запись:
https://github.com/react-dnd/react-dnd/blob/934efc81871f30c6038e2dc52be1504fe38132e7/packages/react-dnd/src/decorateHandler.tsx#L210

Похоже, это отключает проверку, которая в противном случае выдала бы ошибку при отсутствии контекста.

Мне пришлось добавить поставщика, как показано ниже:

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

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

к сведению: я только что столкнулся с проблемой при использовании порталов и исправил ее, заменив устаревший ReactDOM.unstable_renderSubtreeIntoContainer API на ReactDOM.createPortal .

Почему я не потратил много времени на устранение неполадок, связанных с рендерингом, нашел ответ здесь, пожалуйста, серьезно отнеситесь к вашему образцу, спасибо

Кажется, присутствует против React 16.8.1, мой менеджер никогда не создается, а Context.Consumer внутри DragSource никогда не отображает дочерних элементов.

Этого нет в разделе документации "Быстрый старт".

Это практически первое , что должно быть в документации ...

Та же проблема здесь, но только в определенных производственных сборках (я убедился, что DragDropContextProvider присутствует в моем дереве). Я заметил, что при использовании инструментов разработки реакции DragDropContextProvider теряется и отображается как Unknown в дереве компонентов (см. Снимок экрана)

Переход с v7.3.2 на

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

исправляет это для меня.

Я тоже столкнулся с той же ошибкой.
Отображается в разработке, но не в производстве.

Это мое окружение.

• "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 неизвестен

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.

Кто-нибудь знает, было ли это решено до того, как оно автоматически закрылось?

Как я решил
В моем случае все работало нормально в dev, но полностью ломалось в продакшене.

Проблема возникла из-за пути импорта

Не работает импорт
import {useDrag} from "react-dnd/lib/index";

Рабочий импорт
import {useDrag} from "react-dnd";

Тем не менее, я действительно не знаю, как возник первый импорт.

Кроме того, я могу с уверенностью сказать, что вам не нужно импортировать DndProvider в корень приложения . Я делал это раньше и обнаружил, что проблема возникла из-за импорта, но после «исправления» импорта я восстановил DndProvider в одном из компонентов вместо корневого каталога приложения (для более чистого кода), и это работает. отлично.

Контекст:

• "реагировать": "^ 16.8.3",
• "response-dnd": "^ 9.0.1",
• "response-dnd-html5-backend": "^ 9.0.0",

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.

какое-нибудь решение? ничего из предложенного в этой теме не помогло.

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

все работает нормально, только когда я изменяю позицию состояния, я не вижу рендеринга, но вижу изменения в журналах консоли.