How to use the react-dnd.DropTarget function in react-dnd

style={{
          position: "relative",
          width: "100%",
          height: "100%"
        }}
      >
        
        {isOver && !canDrop && this.renderOverlay("red")}
        {!isOver && canDrop && this.renderOverlay("yellow")}
        {isOver && canDrop && this.renderOverlay("green")}
      
    );
  }
}

const DndBoardSquare = DropTarget(
  "boardsquare",
  boardSquareTarget,
  boardSquareCollect
)(BoardSquare);

(DndBoardSquare.DecoratedComponent: typeof BoardSquare);

// $ExpectError: Missing required prop
(: React.Element);

(: React.Element);

// $ExpectError: Invalid required prop
(: React.Element);

(: React.Element);

style={{ background: isOver ? 'rgb(240,240,240)' : 'white', position: 'relative' }}
      >
        <div style="{{">
          {storys &amp;&amp; storys.map((story, index) =&gt; )}
          {!StoryMapStore.isFullScreen &amp;&amp; }
        </div>
      
    );
  }
}

StoryColumn.propTypes = {

};

export default DropTarget(
  'story',
  {
    drop: props =&gt; ({ epic: props.epic, feature: props.feature, version: props.version }),
  },
  (connect, monitor) =&gt; ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    // canDrop: monitor.canDrop(), //去掉可以优化性能
  }),
)(StoryColumn);

>
        {targetIndicator && (
          
        )}
        {this.renderCard()}
      
    );
  }
}

export default DragSource(ItemTypes.CARD, cardSource, collect)(
  DropTarget(ItemTypes.CARD, cardTarget, connect)(Card)
);

return connectDropTarget(
      <div>
        <div>
          <a href="{html_url}">
            <span>{repoName}</span>
            <span> / {authorName}</span>
          </a>
        </div>
        {tagsSection}
        <div>{description}</div>
      </div>
    );
  }
}

export default createObserveComponent(DropTarget(
  'TAG',
  {
    canDrop(props, monitor) {
      const {tagId} = monitor.getItem();
      return props.repo.tags.indexOf(tagId) === -1;
    },
    drop(props, monitor) {
      const {tagId} = monitor.getItem();
      applyTagToRepo(tagId, props.id);
    }
  },
  (connect, monitor) =&gt; ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.canDrop() &amp;&amp; monitor.isOver(),
  })
)(Repo));

export function connectDnD(
  Comp: React.ComponentType
) {
  return DropTarget<
    {
      index: number
      moveRow: (from: number, to: number) => void
      insert: (index: number, data: DocumentState) => void
      plugins: Record
    },
    TargetProps
  >(
    ['row', NativeTypes.FILE, NativeTypes.URL],
    {
      hover(props, monitor, component) {
        if (!component) {
          return null
        }
        const node = component.getNode()
        if (!node) {

,
    ));
  }
}

const mapStateToProps = (state, props) => ({
  isEditing: getEditingRequest(state)
    ? getEditingRequest(state).id === props.request.id
    : false,
  defaultCompact: isDefaultCompact(state),
});

export default flow(
  DropTarget(Type.Request, requestTarget, connector => ({
    connectDropTarget: connector.dropTarget(),
  })),
  DragSource(Type.Request, requestSource, (connector, monitor) => ({
    connectDragSource: connector.dragSource(),
    isDragging: monitor.isDragging(),
  })),
  connect(mapStateToProps, {
    ...CollectionActions,
    ...RequestActions,
    ...ConfigActions,
  }),
)(Request);

const sourceMinion = monitor.getItem().card;

    props.attackMinion({
      sourceMinion,
      source: 'PLAYER',
      targetMinion: props.card,
      target: 'OPPONENT',
    });
  },
};

function collect(connect) {
  return { connectDropTarget: connect.dropTarget() };
}

export default dropTarget('MINION', minionTarget, collect)(TargetableMinion);

dispatch(notesActions.updateNote(updatedNote));
  },

  onMoveNote(sourceId, targetId) {
    dispatch(lanesActions.move('note', sourceId, targetId));
  },

  attachToLane(laneId, noteId) {
    dispatch(lanesActions.attachToLane(laneId, noteId));
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(
  DragSource(itemTypes.LANE, laneSource, collectDragSource)(
    DropTarget([itemTypes.NOTE, itemTypes.LANE], laneTarget, collectDropTarget)(Lane)
  )
);

const entrySource = {
  canDrag: (props: TabProps) => props.canDrag,
  beginDrag: (props: TabProps) => ({
    index: props.index,
    devToolIndex: props.devToolIndex,
  }),
};

const collectSource = (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging(),
});

export const PREVIEW_TAB_ID = 'PREVIEW_TAB';

export const DraggableTab = DropTarget(
  PREVIEW_TAB_ID,
  entryTarget,
  collectTarget
)(DragSource(PREVIEW_TAB_ID, entrySource, collectSource)(PaneTab));

),
      )
    );
  }
}

export default compose(
  DragSource(
    'card',
    rowSource,
    (connect = DragSourceConnector, monitor = DragSourceMonitor) => ({
      connectDragSource: connect.dragSource(),
      isDragging: monitor.isDragging(),
    }),
  ),
  DropTarget('card', rowTarget, (connect = DropTargetConnector) => ({
    connectDropTarget: connect.dropTarget(),
  })),
)(TableRow);