前提・実現したいこと
react初心者です。
Angularチュートリアル と同じものを React で作りたいと思っています。
チュートリアルレベルなので、Redux を使うことは考えていません。
シンプルな react + react-router の組み合わせのみで実現したいです。
発生している問題
チュートリアル「 サービス 」の項目にある、HeroService と MessageService と MessagesComponent の関係が作れずに困っています。
Angularのサンプルでは、MessagesComponent に表示するためのメッセージ配列を MessageService が管理していて、HeroService から MessageService へメッセージが出力されます。
これを react で書いたとき、MessagesComponent は react の管理下にありますが、MessageService と HeroService が管理外になってしまい state を更新することができず再レンダリングされません。
このような動作をするものを作りたい場合、react ではどう作るのが正解でしょうか?
該当のソースコード
ここに動作するコードがあります。
https://stackblitz.com/edit/react-tutorial-imitation-of-angular
Angularのサンプルコード では、ヒーローの選択や追加・削除等の操作を行うたび、画面下部にメッセージが出力されますが、このコードではメッセージは出力されません。
試したこと
message-service を廃止して親コンポーネント(App)に state を作り、そこにメッセージ配列を保持、それをMessagesコンポーネントに受け渡し...まで作ってみましたが、HeroServiceからそれを更新する手段がなく諦めました。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。