React DnD：连接 DragSource 不是函数

Question

我有一个 top-level 组件，它由几个不同的组件组成。

InventoryBox - 指定库存包含
InventoryList - 指定库存中的项目列表
物品 - 库存列表中的单个物品

InventoryBox 是 top-level 组件，因此我将其包装在 DragDropContext 中。我遇到的问题运行是我在 collect 函数中指定的 connectDragSource 函数没有将该方法注入到我的项目组件中。

我的收藏功能

function collect(connect, monitor) {
    return {
        connectDragSource: connect.dragSource(),
        isDragging: monitor.isDragging()
    };
}

我的项目组件

var Item = React.createClass({
    render: function(){
        var id = this.props.id;
        var isDragging = this.props.isDragging;
        var connectDragSource = this.props.connectDragSource;
        return (
          <div className="item">
               {this.props.children}
          </div>
        );
     }

});

我的最终目标是将 Item 组件从列表拖到另一个 Inventory Box。

Answer 1

当您在 Item inventoryList 中使用 Item 时，您只是在使用 Item 而不是包装的 Item。 var Item = React.... 但是你需要声明一个变量。

var ItemWrapped = DragSource(Types.INVENTORY, itemSource, collect)(Item);
// Use the ItemWrapped instead.... the same goes for all

DragSourcereturns本源

 return function decorateSource(DecoratedComponent) {
  return decorateHandler({
    connectBackend: (backend, sourceId) => backend.connectDragSource(sourceId),
    containerDisplayName: 'DragSource',
    createHandler: createSource,
    registerHandler: registerSource,
    createMonitor: createSourceMonitor,
    createConnector: createSourceConnector,
    DecoratedComponent,
    getType,
    collect,
    options
  });

};

所以你需要处理返回的函数

React DnD：连接 DragSource 不是函数

ReactDnD : connectDragSource is not a function

reactjs

react-dnd