hc-components-test/src/components/dnd/dropItem.jsx

基于react的通用组件库

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import {DropTarget} from 'react-dnd';

@DropTarget((props) => {
  return props.types
}, {
  drop: (props, monitor) => { // component
    const type = monitor.getItemType();
    const data = monitor.getItem().data;
    if (props.types.indexOf(type) > -1) {
      props.doAction(type, data, monitor);
    } else {
      props.doAction(type, data, monitor);
    }
  }
}, (connect, monitor) => {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop()
  };
})
export class DropItem extends React.PureComponent {
  static propTypes = {
    types: PropTypes.array.isRequired,
    doAction: PropTypes.func.isRequired,
    connectDropTarget: PropTypes.func,
    canDrop: PropTypes.bool,
    isOver: PropTypes.bool,
    children: PropTypes.any
  }

  render() {
    let className = this.props.canDrop ? 'j-com-drop ' : ' ';
    className += this.props.isOver ? 'j-com-drop-over' : '';

    return this
      .props
      .connectDropTarget(
        <div className={className}>{this.props.children}</div>
      );
  }
}