Question

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

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

});

我的最终目标是将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

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

};

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

ReactDnD：connectDragSource不是一个函数

1 个答案: