react-dnd 可以与高阶组件一起使用吗?
Can react-dnd work with higher order component?
我正在创建一个表单生成器并且需要能够对字段重新排序,所以我想将所有样板拖/放代码保存在一个可重复使用的位置,而更高阶的组件似乎一个很好的方法来做到这一点。所以我有一些这样的代码:
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 部分函数。有没有办法让这个工作?
你得到这个错误,因为你的 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);
我正在创建一个表单生成器并且需要能够对字段重新排序,所以我想将所有样板拖/放代码保存在一个可重复使用的位置,而更高阶的组件似乎一个很好的方法来做到这一点。所以我有一些这样的代码:
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 部分函数。有没有办法让这个工作?
你得到这个错误,因为你的 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);