React DND: 创建可拖拽的行和列组件 - connectDragTarget 和 connectDragSource 使用指南

在 React DND 中，connectDragTarget 和 connectDragSource 是用于创建可拖拽行和列的高阶组件。\n\nconnectDragTarget 是一个函数，用于创建一个接收拖拽元素的组件。它将拖拽的行组件作为参数，并返回一个新的组件，该组件将被用作接收拖拽元素的目标。\n\n例如，我们可以使用 connectDragTarget 来创建一个可接收拖拽行的目标组件：\n\njsx\nimport { connectDragTarget } from 'react-dnd';\n\nconst RowTarget = ({ connectDragTarget, children }) => {\n const connectTarget = connectDragTarget(\n <div className="row-target">{children}</div>\n );\n\n return connectTarget;\n};\n\nexport default connectDragTarget(RowTarget);\n\n\nconnectDragSource 是一个函数，用于创建一个可拖拽的列组件。它将拖拽的列组件作为参数，并返回一个新的组件，该组件将被用作拖拽源。\n\n例如，我们可以使用 connectDragSource 来创建一个可拖拽的列组件：\n\njsx\nimport { connectDragSource } from 'react-dnd';\n\nconst ColumnSource = ({ connectDragSource, children }) => {\n const connectSource = connectDragSource(\n <div className="column-source">{children}</div>\n );\n\n return connectSource;\n};\n\nexport default connectDragSource(ColumnSource);\n\n\n通过使用这两个高阶组件，我们可以将拖拽功能添加到行和列组件中，使它们可以作为拖拽元素和拖拽目标进行交互。