ReactDnD，支持创建一个简单的DragDropContext - DragSource示例

Question

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

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

{{1}}

}）;

任何人都可以解释我做错了吗？

Answer 1

你正在使用DragSource（itemType，source，collect）正确包装Knight组件，但是在knight组件中你需要用this.props.connectDragSource包装render返回的内容，类似于教程（我刚刚复制过）它在这里）：

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标签。