質問: MESSAGE_TYPE.EVERNOTE_LOGIN_ERROR) { // $('#evernote-status').text("Evernoteにログインしてください"); console.log(message); // エラーメッセージ受信、確認済み } else { console.log(message); } }); ``` ``` /* * どのようなコードを書けば良い??? */ function NewTab() { return ( { loginWithEvernote(); }}>Evernote Login /* Evernoteにログインしていない状態でノートブックを取得する(エラー処理) */ { storeBooks(); } }>Store Books ); } ``` その他、不足な情報などありましたら適宜追加していきますので、どうぞよろしくお願いいたします。
回答: イベントに反応してエラーメッセージを表示するようにするためには何らかの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で解除するようにするのが普通です。 ``` ReactDOM.render( < NewTab / > , document.getElementById('root')); class NewTab extends React.Component { constructor(props) { super(props); this.state = { errMsg: null, }; this.messageHandler = this.messageHandler.bind(this); } componentDidMount() { chrome.runtime.onMessage.addListener(this.messageHandler); } messageHandler(message, sender, sendMessage) { if (message["type"] == MESSAGE_TYPE.EVERNOTE_LOGIN_ERROR) { this.setState({ errMsg: message }); } } componentWillUnmount() { chrome.runtime.onMessage.removeListener(this.messageHandler); } render() { const { errMsg } = this.state; // ... } } ``` (テストしてないのでミスがあるかもしれません) 参考になりそうな日本語のリソース * React初心者のまとめ(基本編:1/3)- Qiita