reactjs - ReactDnD，启用创建简单的 DragDropContext - DragSource 示例

Question

我是 React 新手，并按照本教程将 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}>♘&lt;/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 组件，但是在骑士组件中，您需要使用 this.props.connectDragSource 包装渲染返回的内容，类似于教程（我刚刚在此处复制了它） ：

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

请注意他如何从道具中获取 connectDragSource（并由 collect 函数注入），然后用它包装 div 标签。