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() returns 一个 js class 定义。

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

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

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

Can react-dnd work with higher order component?

reactjs

react-dnd