質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1259閲覧

Reactが管理していないサービスクラス内で変更された値を画面に反映したい

spookybird

総合スコア1803

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2018/07/21 08:04

前提・実現したいこと

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からそれを更新する手段がなく諦めました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

以下のようにして動作しました。

  • MessageService は削除
  • App コンポーネントを Stateful に変更して、messages を保持
  • App コンポーネントのインスタンスを HeroService へ渡す
  • HeroService 内で App コンポーネントの setState メソッドを呼んで messages を更新する
  • Messages コンポーネントは messages と、メッセージクリア用のメソッド clearMessages を props として受け取って利用する

動作上は解決しましたが、これが react として問題ない設計なのか疑問が残ります。

動作するコードは以下にあります。
https://stackblitz.com/edit/react-tutorial-imitation-of-angular-2

投稿2018/07/23 02:03

spookybird

総合スコア1803

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問