ReactDnD，能够创建一个简单的 DragDropContext - DragSource 示例

Question

我是 React 的新手，正在关注 this tutorial 将 Drag'n'Drop 添加到我的应用程序

我正在按照教程一步一步地创建一个带有可拖动骑士棋子的棋盘，但无法让它工作（仍然无法拖动骑士）

    // imports
var {DragSource, DragDropContext} = ReactDnD;

var knightSource = {
    beginDrag: function (props) {
        return {};
    }
};

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

var Knight = DragSource("knight", knightSource, collect)(React.createClass({
    render() {
        var style = {
            cursor: 'move',
            fontSize: 25
        }
        return(
            <div style={style}>♘</div>
        );
    }
}));


var Board = DragDropContext(HTML5Backend)(React.createClass({
    render() {
        var style = {
            width: '500px',
            height: '500px',
            border: '1px solid black',
            boxShadow: '4px 2px 2px black'
        }
        return (
            <div style={style}>
                <Knight/>
            </div>
        );
    }
}));

ReactDOM.render(
    <Board/>,
    document.getElementById('ex13')
);

});

谁能解释一下我做错了什么？

Answer 1

您正在使用 DragSource(itemType, source, collect) 正确包装 Knight 组件，但是在 knight 组件中您需要使用 this.props.connectDragSource 包装渲染 returns，类似于教程（我刚刚复制到这里）：

render: function () {
  var connectDragSource = this.props.connectDragSource;
  var isDragging = this.props.isDragging;

  return connectDragSource(
    <div style={{
      opacity: isDragging ? 0.5 : 1,
      fontSize: 25,
      fontWeight: 'bold',
      cursor: 'move'
    }}>
      ♘
    </div>
  );
}

注意他如何从 props 中获取 connectDragSource（并通过 collect 函数注入），然后用它包裹 div 标签。

ReactDnD，能够创建一个简单的 DragDropContext - DragSource 示例

ReactDnD, enable to create a simple DragDropContext - DragSource example

reactjs

react-dnd