react-dnd 可以与高阶组件一起使用吗？

Question

我正在创建一个表单构建器，并且需要能够重新排序字段，所以我想将所有样板拖放代码保留在一个可重复使用的位置，并且更高阶的组件似乎是一个不错的选择方法来做到这一点。所以我有一些这样的代码：

function SortableField(FieldComponent) {
    return class extends React.Component {
        render() {
            const { connectDragSource, connectDropTarget } = this.props;
            return connectDragSource(connectDropTarget(
                <FieldComponent {...this.props}/>
            ));
        }
    }
}
export default flow(
  DragSource('field', fieldSource, collect),
  DropTarget('field', fieldTarget, collectTarget)
)(SortableField);

该代码之上是所有样板拖放代码。

我认为将每个字段类型组件包装在其中。问题是如果我运行它，我会收到以下错误：

Uncaught TypeError: Cannot call a class as a function

我认为这是因为它不喜欢我将 SortableField 函数传递给 DragSource / DragTarget 部分函数。有没有办法让这个工作？

Answer 1

您收到此错误，因为您的 SortableField() 返回一个 js 类定义。

如果您想使用FieldComponent，您只需导入它，然后创建一个使用它的类。您修改后的代码如下：

import FieldComponent from 'components/FieldComponent'

class SortableField extends React.Component {
    render() {
        const { connectDragSource, connectDropTarget } = this.props;
        return connectDragSource(connectDropTarget(
            <FieldComponent {...this.props}/>
        ));
    }
}
export default flow(
  DragSource('field', fieldSource, collect),
  DropTarget('field', fieldTarget, collectTarget)
)(SortableField);