問題タブ [react-dnd]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - react-dnd は高次コンポーネントで動作しますか?
フォームビルダーを作成していて、フィールドの順序を変更できるようにする必要があるため、すべてのボイラープレートのドラッグ/ドロップコードを 1 つの再利用可能な場所に保持し、より高次のコンポーネントを使用するのが良い方法のように思えましたそれ。だから私はこのようないくつかのコードを持っています:
そのコードの上には、定型的なドラッグ/ドロップ コードがすべてあります。
その中に各フィールドタイプのコンポーネントをラップすると思います。問題は、これを実行すると次のエラーが発生することです。
Uncaught TypeError: Cannot call a class as a function
これは、SortableField 関数に DragSource / DragTarget 部分関数を渡すのが好きではないためだと思います。これを機能させる方法はありますか？
reactjs - React DnD - 「同時に 2 つの HTML5 バックエンドを持つことはできません。」
Rails5、action Cable、React and Rails、React DnD で POC を作成しようとしています。
目的は、trello のようなアプリを作成することですが、採用プロセス用です。
私のフロントはReactJSにあります。
私は 3 つのコンポーネントを持っています。まず、「Candidates」というコンテナを呼び出します。このコンポーネントは、「Card」コンポーネントを呼び出す 2 つの「CardBoard」コンポーネントを呼び出します。
私は、ドラッグ可能なカードとドロップ可能な CardBoard の DnD ライブラリに反応します。カードをボール紙に落とすと、post 呼び出しと websocket (rails5 のアクション ケーブル) を使用して状態を更新します。ポストコールの後にこのメッセージが表示される理由がわかりません:
Candidate.jsx =
CardBoard.jsx =
Card.jsx=
理解を深めるために、私の機能と彼のバグの gif をここに示します。
reactjs - React DnD. コンテナの小道具に依存する itemTypes を DragSource/DropTarget に渡す方法は?
考慮すべき点:
- この例はでっち上げですが、問題を示しています。
- 実際のアプリケーションではグローバル ストレージが使用され、アクション変更は itemTarget の hover() メソッド内で発行されています。ここでは、グローバル ストレージを模倣するために、window オブジェクトが使用されます。
- ES7 デコレータ (または他の ES7 構文) の使用は許可されていません。
というわけで、以下の実装では、ドラッグ時に itemSource の endDrag() メソッドが呼び出されていないのが問題です。
考えられる解決策は、アイテム タイプだけが異なる異なる (ただし実際には同じ) コンポーネントを作成し、それらのコンポーネントを Container コンポーネントにインポートして、props.itemType に応じてマウントすることです。つまり、DRY オプションではありません。
質問は次のとおりです。 1. それを正しく行う方法は? DragSource/DropTarget 内のコンテナの props itemType に依存しているドラッグ可能なコンポーネントを再利用してレンダリングする方法は? 2. 以下の解決策が機能しないのはなぜですか? endDrag() メソッドが呼び出されないのはなぜですか?
Container.js:
アイテム.js:
ItemDnDDecorator.js: