初めて React で遊んでいますが、とても気に入っています。これまでのところ、ボードゲームのGoを(大部分) 実装しましたが、慣用的な React の方法でアプローチする方法がわからないという奇妙なことに遭遇しました。基本的に、モデル (ボード ゲーム) を独自のクラスBoardとして実装しました。play(i,j)コンストラクター、メソッド、およびのみを公開しpassます。すべてのゲーム ロジックを処理し、独自の内部状態を適切に更新します。ビュー/コンポーネントに関連するものへの参照はありません。のインスタンスへの参照を維持するBoardViewという React コンポーネントがありますBoard。というコンポーネントもありますAlertView必要に応じて、ゲームの状態 (不正な動きなど) に関するメッセージを表示します。
Board今ではすべてがうまく機能しており、クラスとそのビューの間の関心の分離が気に入っています。しかし、Boardクラスの変更をビューに伝える方法は珍しく、他の React コードと矛盾しているように感じます。基本的に、私はjQuery のイベント システムを悪用して、のような任意のイベントをトリガーできるようにしています["update", "atari", "suicide"]。このスキームでは、Component には を呼び出す onClick リスナーがありBoard.play、Board インスタンスで 0 から多数のイベントをトリガーします。"update"コンポーネントはイベントをリッスンし、 を呼び出しますthis.setState。これにより強制的に再起動render()され、ゲームを正しく描写する状態にビューが置かれます。は、同じボード インスタンスでとイベントをAlertViewリッスンし、同様に呼び出します"atari""suicide"this.setState、別の をトリガーしますrender()。
jQuery イベントを削除する必要がありますか? もしそうなら、これを行う最善の方法は何ですか?
すべてのコードはここから入手でき、ここでアプリで遊ぶことができます。
編集:後世のために、この質問はコミット3f600cで行われました。