2

フォームビルダーを作成していて、フィールドの順序を変更できるようにする必要があるため、すべてのボイラープレートのドラッグ/ドロップコードを 1 つの再利用可能な場所に保持し、より高次のコンポーネントを使用するのが良い方法のように思えましたそれ。だから私はこのようないくつかのコードを持っています:

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 に答える