Reactjs ReactDnD:connectDragSource不是函数

我有一个顶级组件，它由几个不同的组件组成

• InventoryBox-指定资源清册包含的空间
• InventoryList-指定库存中的项目列表
• 物料-库存列表中的单个物料

InventoryBox是顶级组件，因此我将其包装在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>
        );
     }

});

var Item=React.createClass({
render:function（）{
var id=this.props.id；
var isDragging=this.props.isDragging；
var connectDragSource=this.props.connectDragSource；
返回(
{this.props.children}
);
}
});

---

我的最终目标是将项目组件从列表拖到另一个库存框。

当您在项目库存列表中使用项目时，您只是在使用项目，而不是包装的项目。变量项=反应。。。。但是您需要声明一个变量

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

DragSource在源文件中返回此值

 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
  });

})

---

因此，您需要处理返回的函数

这就是帮助我解决最初问题的原因。不管出于什么原因，我认为只要执行DragSource（…）就会为我注入必要的信息，然后将我的项用作拖动源！