高次成分と反応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); 

上記のコードは、すべて定型的なドラッグ/ドロップコードです。

各フィールドタイプのコンポーネントをその中にラップすると思います。問題は、私は、私は次のエラーを取得するこれを実行する場合である：私はそれは私がSortableFieldを渡したいとしたDragSource/DragTarget一部機能を機能していないためだと思います

Uncaught TypeError: Cannot call a class as a function

。この仕事をする方法はありますか？

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