問題タブ [react-dnd]

私は React DND Chess チュートリアル (十分に単純です) に従おうとしていますが、コードの一部で問題が発生したようです。以下のコードに見られるように、connectDragSource を関数として宣言したときに、connectDragSource が関数ではないというエラーが表示されます。過去 1 日間、トラブルシューティングを試みましたが、見込み顧客が不足しています。それが役立つ場合、私は React-Redux-Universal ボイラーを使用していますが、ルートとレンダリングされている子を介して問題が発生しているとは思えません。

コンポーネントコード:

ホーム コンポーネント コード:

アプリ コード:

コンポーネントをドラッグしようとすると、const として宣言されているときに、レンダー関数内で propType を宣言できなかったことがコンソールに通知され{ connectDragSource, isDraggin } = this.props;ます。KnightSource オブジェクトから is Dragging プロパティを削除すると、このエラーが修正されることに気付きましたが、その理由はわかりません。

私は、ユーザーが画面上で複数の部分をドラッグアンドドラッグできるようにする Web アプリを作成しています。それぞれが個々の特定のデータを保持しています。ユーザーが画面にピースを追加したい場合は、ボタンをクリックするだけで別のピースが表示されます。React DND (Drag and Drap) ライブラリを使用してコンポーネントを分離した状態に保ちましたが、これまでのところ問題なく機能しています。問題は、画面にピースを追加する動的機能にあります。現在 (以下の子コード)、古い状態オブジェクトを取得し、浅いコピーを実行し、新しく作成されたオブジェクトを既存の状態オブジェクトとマージし、終了時に状態を更新しています。ただし、この操作を実行するたびに、新しいピースを移動して次のエラーが表示されるまで、すべて正常に動作します (画面上に新しいピースが生成されます)。

既存の状態遷移中 ( 内など) は更新できませんrender。Render メソッドは props と state の純粋な関数であるべきです。

このエラーから抜け出し、状態オブジェクトを更新するにはどうすればよいですか。

注: ボタン (下のスクリーンショット) は、State オブジェクト内のオブジェクトの現在の数を示します。以下では、State に 7 つのオブジェクトを追加しました。

アプリのスクリーンショット: 親:

子：

ドロップ ターゲットがネストされている場合、マウス スクロール ホイールを使用してドロップ ターゲット間を循環できる (または、一定時間後に自動サイクルが発生する) ドロップ システムを実装したいと考えています。画面上のまったく同じ領域。

現在、ホバー関数が呼び出されたとき/ isOver propが変更されたときに、ドロップターゲットが自分自身を登録/登録解除するために使用できるコンテナから渡されたコールバックを使用できると考えていますが、それは非常に結合されており、渡す必要がありますコンテナーから DropTargets に props を挿入すると、実際のアプリケーションでは、コンテナーとドロップ ターゲットの間に不明な数のレベルが存在するため、何らかのコールバック システムを設定する必要があり、全体的には理想的なソリューションではありません。また、ドロップターゲットがどれだけ深くネストされているかわからないため、サイクリング時に正しい順序を確保する方法がわかりません（これを実装する方法については、以下のコードを参照してください）。そのようなシステムを実装するためのよりクリーンな方法はありますか?

React クラスで定義された「hello」メソッドを呼び出そうとしています。コンポーネントのプロップは、Students 状態オブジェクトから値を読み取るように設定されており、プロパティの 1 つが「hello」という名前になっています。hello プロパティは、john のデフォルト プロップからの init です。john のデフォルト プロップがプロパティ以外に設定されていて、オブジェクトをログアウトすると、正しく表示されます。しかし、john プロパティ内から「hello」メソッドを呼び出そうとしても、何も起こりません (「hello」という単語をログアウトすることになっています。私の質問は、React のデフォルト プロパティまたは初期化状態内からメソッドを呼び出すことは許可されていますか?もしそうなら、私はパターンを正しく実装していますか?

補足: 私が使用しているライブラリについて疑問がある場合は、React-Drag & Drop (React を使用してドラッグ アンド ドロップ インターフェイスを分離するため) です。

コード：

ドラッグ アンド ドロップで絵文字を整理できるアプリを作成しています。絵文字オブジェクトの大規模な配列をソートするドロップ時に実行されるメソッドがあります。setState を実行してオブジェクトをコミットして親コンポーネントの状態に戻すと、React は親コンポーネントを DOM から削除します。消えるだけです...コンソールにエラーはなく、react devツールを使用すると、コンポーネントの状態が実際に新しいオブジェクトで更新されていることがわかります。どんな助けでも大歓迎です。

この並べ替えメカニズムは、更新されたオブジェクトを props を介してその親コン​​ポーネントに送信します。

オブジェクトの配列は次のようになります。

そのすべてが親の状態に追加され、コンポーネントがエラーなしで削除されます。

どんな情報でも大歓迎です、ありがとう！

react-dnd の実装をテストしようとしています。ドロップ関数の 1 つで、関数を使用してmonitor.getInitialClientOffset()オフセットを取得しています。このメソッドをスタブして、特定のオフセットを返し、それをアサートできるようにしたいと考えています。オンですが、これを理解できません。私のテストでは、私が使用しています

(これはhttps://gaearon.github.io/react-dnd/docs-testing.htmlの標準の wrapInTestContext を使用しています)

ドロップ関数はテスト バックエンドからモニターに渡されますが、そのスタブ バージョンをシミュレーション メソッドに渡す方法がドキュメントにありません。