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

可以使用更高阶的组件进行反应吗？

1 个答案: