2

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

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 部分函数。有没有办法使这项工作？

4

1 回答 1

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);
于 2017-03-12T06:27:43.823 回答