1

いくつかの異なるコンポーネントで構成される最上位コンポーネントがあります。

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

});

私の最終的な目標は、アイテム コンポーネントをリストから別のインベントリ ボックスにドラッグすることです。

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 はソースでこれを返します

 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 に答える