Reactで受け取ったメッセージでページを再描画するイベントのコード

現在、新しいタブ(newtab)を拡張するChrome拡張機能を作成しています。

質問したい内容はエラー処理に開かれている新しいタブにバッググラウンドページからのメッセージを受信し、ページにエラーメッセージを描画する処理です。メッセージを受信するまでは確認が取れているのですが、Reactはまだまだ勉強中なものでどのように書けばよいかわかりません。
初歩的な質問でしたら申し訳ないのですが、よろしくお願いいたします。

処理の流れ(エラーパターン)

新しいタブを開く
新しいタブからバッググラウンドページヘメッセージ
　　(バッググラウンド)メッセージ受信
　　(バッググラウンド)処理でエラーを発生
　　（バッググラウンド）エラーを新しいタブへエラーメッセージ
新しいタブでメッセージ受信

　　--- ここまでデバッグ確認済み ---
7. エラーを画面に描画する（この方法がわからない）

以下にコードを記載します
index.js

Javascript
1ReactDOM.render( < NewTab / > , document.getElementById('root'));
2
3/*受信処理*/
4chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
5    if (message["type"] == MESSAGE_TYPE.EVERNOTE_LOGIN_ERROR) {
6        // $('#evernote-status').text("Evernoteにログインしてください");
7        console.log(message); // エラーメッセージ受信、確認済み
8    } else {
9        console.log(message);
10    }
11});

JavaScript
1/*
2 * どのようなコードを書けば良い？？？
3 */
4function NewTab() {
5
6
7  return (
8    <div className="App">
9      <body className="App-body">
10        <div>
11          <button onClick={() => { loginWithEvernote(); }}><h1>Evernote Login</h1></button>
12        </div>
13        <div>
14          /* Evernoteにログインしていない状態でノートブックを取得する（エラー処理） */
15          <button onClick={() => { storeBooks(); } }><h1>Store Books</h1></button>
16        </div>
17      </body>
18    </div>
19  );
20}

その他、不足な情報などありましたら適宜追加していきますので、どうぞよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

イベントに反応してエラーメッセージを表示するようにするためには何らかのstate(状態)が必要になるので、質問文にあるようなfunction componentではできません(実は最近reactに追加されたHookという機能を使えばできますが、ここでは使わないでおきます)。このようなときはclass componentを使います。

class componentはECMAScript 2015で追加されたclass syntaxを用いてcomponentを定義します。constructorでstateの初期値を設定し、イベントハンドラやライフサイクルメソッドでstateを更新します。stateが更新されるとrenderメソッドが実行されて、表示されます。

State and Lifecycle - React

componentで何らかの外部のイベントをリッスンしたいときは、ライフサイクルメソッドのcomponentDidMountでリスナーを設定し、componentWillUnmountで解除するようにするのが普通です。

jsx
1ReactDOM.render( < NewTab / > , document.getElementById('root'));
2
3class NewTab extends React.Component {
4  constructor(props) {
5    super(props);
6    this.state = {
7      errMsg: null,
8    };
9
10    this.messageHandler = this.messageHandler.bind(this);
11  }
12
13  componentDidMount() {
14    chrome.runtime.onMessage.addListener(this.messageHandler);
15  }
16
17  messageHandler(message, sender, sendMessage) {
18    if (message["type"] == MESSAGE_TYPE.EVERNOTE_LOGIN_ERROR) {
19      this.setState({ errMsg: message });
20    }
21  }
22
23  componentWillUnmount() {
24    chrome.runtime.onMessage.removeListener(this.messageHandler);
25  }
26
27  render() {
28    const { errMsg } = this.state;
29    // ...
30  }
31}
32