react-dnd 行是connectDragTarget列是connectDragSource

在react-dnd中，connectDragTarget和connectDragSource是用于创建可拖拽行和列的高阶组件。

connectDragTarget是一个函数，用于创建一个接收拖拽元素的组件。它将拖拽的行组件作为参数，并返回一个新的组件，该组件将被用作接收拖拽元素的目标。

例如，我们可以使用connectDragTarget来创建一个可接收拖拽行的目标组件：

import { connectDragTarget } from 'react-dnd';

const RowTarget = ({ connectDragTarget, children }) => {
  const connectTarget = connectDragTarget(
    <div className="row-target">{children}</div>
  );

  return connectTarget;
};

export default connectDragTarget(RowTarget);

connectDragSource是一个函数，用于创建一个可拖拽的列组件。它将拖拽的列组件作为参数，并返回一个新的组件，该组件将被用作拖拽源。

例如，我们可以使用connectDragSource来创建一个可拖拽的列组件：

import { connectDragSource } from 'react-dnd';

const ColumnSource = ({ connectDragSource, children }) => {
  const connectSource = connectDragSource(
    <div className="column-source">{children}</div>
  );

  return connectSource;
};

export default connectDragSource(ColumnSource);

通过使用这两个高阶组件，我们可以将拖拽功能添加到行和列组件中，使它们可以作为拖拽元素和拖拽目标进行交互