React Dnd canDrop 道具没有变成真但 isOver 工作正常

Question

我的 Reactjs 演示项目中有 3 个组件，我正在使用反应 DnD 组件。

在此处反应 DnD Examples。

Box.js

import React, { Component } from 'react';
import { DropTarget } from 'react-dnd';


const boxTarget = {
    canDrop(props) {
        // alert()
    },

    drop(props) {
        // alert()
    }
};

function collect(connect, monitor) {
    return {
      connectDropTarget: connect.dropTarget(),
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop()
    };
}

const ItemTypes = {
    CARD: 'card'
};


class Box extends Component {

    render() {
        const { connectDropTarget, isOver, canDrop } = this.props;

        return connectDropTarget(
          <div style={{
            position: 'relative',
            width: '200px',
            height: '200px',
            background: isOver ? '#ff0000' : '#eee'
          }}>
              { this.props.children }
          </div>
        );
    }

}

export default DropTarget(ItemTypes.CARD, boxTarget, collect)(Box);

card.js

import React, { Component } from 'react';
import { DragSource } from 'react-dnd';


const ItemTypes = {
    CARD: 'card'
};

const cardSource = {
    beginDrag(props) {
      return {  };
    },

    endDrag(props, monitor) {
      const item = monitor.getItem()
      const dropResult = monitor.getDropResult()

      if (dropResult) {
        alert(`You dropped ${item.name} into ${dropResult.name}!`)
      }
    },
}

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

class Card extends Component {

    render() {
        const { connectDragSource , isDragging } = this.props;

        return connectDragSource( 
          <div style={{
            opacity : isDragging ? 0.5 : 1,
            height: '50px',
            width: '50px',
            backgroundColor: 'orange',
          }}>
            &#9822;
          </div>
        );
      }

}

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

simpleDrag.js

import React, { Component } from 'react';

import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import CARD from './card';
import BOX from './box';
import Calder from './fullcalender';

class simpleDrag extends Component {

    render() {
        return(
            <div>
                <BOX />
                <CARD/>
            </div>    
        ); 
    }

} 

export default DragDropContext(HTML5Backend)(simpleDrag);

simpleDrag.js 是同时显示盒子和卡片组件的父组件，现在我面临的问题是 box.js 我对样式进行了以下三元检查：

background: isOver ? '#ff0000' : '#eee'

现在 isOver 这个样式有效，也就是说 div 变成了“#ff0000”，但是这个检查不知何故对 canDrop 不起作用，为什么 canDrop 检查不起作用？

以上代码可以在我的 github 仓库 HERE.

中找到

Answer 1

您应该从 canDrop 返回 true/false inside boxTarget in Box.js.

React Dnd canDrop 道具没有变成真但 isOver 工作正常

React Dnd canDrop prop not turning true but isOver works fine

reactjs

react-dnd