1

I have a top-level component that consists of a few different components.

  • InventoryBox - designates the space that an inventory contains
  • InventoryList - designates the list of items in the inventory
  • Item - a single item in the inventory list

InventoryBox is the top-level component, so I have wrapped it in a DragDropContext. The issue I am running into is that the connectDragSource function that I specified in my collect function is not injecting the method into my item components.

My Collect Function

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

My Item Component

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

});

My ultimate goal would be to drag the Item components from the list to another Inventory Box.

4

1 回答 1

2

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

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

DragSource 在源中返回 this

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

};

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

于 2016-01-23T09:18:18.700 回答