Reactjs react dnd能否与高阶组件一起工作？

我正在创建一个表单生成器，需要能够对字段进行重新排序，因此我希望将所有样板文件拖放代码保存在一个可重用的位置，而高阶组件似乎是一种很好的方法。所以我有一些类似这样的代码：

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

函数可排序字段（FieldComponent）{
返回类扩展了React.Component{
render（）{
const{connectDragSource，connectDropTarget}=this.props；
返回connectDragSource（connectDropTarget(
));
}
}
}
导出默认流(
DragSource（“字段”，字段源，收集），
DropTarget（'field'，fieldTarget，collectTarget）
)（可排序字段）；

上面的代码是所有的样板拖放代码

我认为应该将每个字段类型组件都封装在其中。问题是，如果运行此命令，则会出现以下错误：

未捕获类型错误：无法将类作为函数调用

---

我认为这是因为它不喜欢我将SortableField函数传递给DragSource/DragTarget分部函数。有什么方法可以让它工作吗？

您会得到这个错误，因为您的

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

从“组件/FieldComponent”导入FieldComponent
类SortableField扩展了React.Component{
render（）{
const{connectDragSource，connectDropTarget}=this.props；
返回connectDragSource（connectDropTarget(
));
}
}
导出默认流(
DragSource（“字段”，字段源，收集），
DropTarget（'field'，fieldTarget，collectTarget）
)（可排序字段）；

但这不再是高阶组件。高阶组件应该是接受组件然后返回组件的函数，而不是组件类本身。此答案中的代码使得

SortableField

仅适用于

FieldComponent

而不适用于其他内容。