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 -statement：
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>

仅供参考：我刚刚在使用 Portal 时遇到了这个问题，并通过将过时的ReactDOM.unstable_renderSubtreeIntoContainer API 替换ReactDOM.createPortal来修复它。

为什么我没有花很多时间排查渲染原因，在这里找到答案，请认真做您的样本，谢谢

似乎针对 React 16.8.1，我的经理从未被创建，并且DragSource的 Context.Consumer 永远不会呈现任何孩子。

这不在文档的“快速入门”部分中的任何位置。

这实际上是应该在文档中的第一件事......

同样的问题，但仅在某些生产版本下（我确保DragDropContextProvider存在于我的树中）。 我注意到当使用反应开发工具时DragDropContextProvider丢失并在组件树中显示为Unknown （见截图）

从 v7.3.2 降级到

• "react-dnd": "7.1.0",
• "react-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 未知

此问题已自动标记为陈旧，因为它最近没有活动。 如果没有进一步的活动发生，它将被关闭。 感谢你的贡献。

有谁知道在它自动关闭之前是否已经解决了？

我是如何解决的
就我而言，在开发中一切正常，但在生产中完全损坏。

问题是由useDrag导入路径引起的...

不工作导入
import {useDrag} from "react-dnd/lib/index";

工作导入
import {useDrag} from "react-dnd";

也就是说，我真的不知道第一个导入是如何起源的。

另外，我可以肯定地说，您不需要在 app root 中导入 DndProvider 。 我之前已经这样做了，发现问题是由导入引起的，但是在导入“修复”之后，我已经在其中一个组件而不是应用程序根目录中恢复了 DndProvider（为了更清晰的代码），这是有效的美好的。

语境：

• “反应”：“^ 16.8.3”，
• "react-dnd": "^9.0.1",
• "react-dnd-html5-backend": "^9.0.0",

此问题已自动标记为陈旧，因为它最近没有活动。 如果没有进一步的活动发生，它将被关闭。 感谢你的贡献。

有什么解决办法吗？ 本主题中的任何建议都没有帮助。

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

仅当我更改状态位置时一切正常，当我可以看到控制台日志中的更改时，我看不到渲染。