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

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

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

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

React.js

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

Q&A

解決済

1回答

2834閲覧

React.jsをアロー記法で書くとcomponentDidMount()などのコールバックがundefindになる

drizzing20

総合スコア363

JavaScript

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

React.js

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

0グッド

0クリップ

投稿2017/12/02 03:15

編集2017/12/02 04:29

##やりたいこと
Reactのアロー記法の中でcomponentDidMount()とか使いたい

###環境

  • JavaScript ES6(ES6では使えないみたいなことないですよね...
  • React.js

↓にcomponentDidMountとか入れたい

JavaScript

1//Sample.jsx 2 3import * as React from 'react'; 4 5const Sample = () => { 6 return ( 7 <div className='Sample'> 8 <h2>Sample</h2> 9 </div> 10 ); 11}; 12 13export default Sample; 14

JavaScript

1//Sample.jsx 2 3import * as React from 'react'; 4 5const Sample = () => { 6 componentDidMount() { //←エラーになる 7 console.log('hello'); 8 }, 9 return ( 10 <div className='Sample'> 11 <h2>Sample</h2> 12 </div> 13 ); 14}; 15 16export default Sample; 17

##試したこと
↓とかに書き換えてみたけどやはりundefind

componentDidMount: () => { console.log('hello'); }

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

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

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

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

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

HayatoKamono

2017/12/02 06:05

> Reactのアロー記法の中でcomponentDidMount()とか使いたい それは何の為にでしょうか? 何らかの目的があって、そういった方法をその目的の為に取りたいのだと思いますが、目的がなんであれ、他に好ましいやり方があるはずです。
drizzing20

2017/12/02 11:49

Reactの参考書読んでて、出てきた関数をアロー記法で使おうと思ったけど、やり方が載ってなかったので質問してます。 そもそも、componentDidMount等を使うのは推奨されてないということでしょうか?
guest

回答1

0

ベストアンサー

できません。

Reactでコンポーネントを作成する場合は三つの方法があります。

  1. createReactClass()を使って作成する。

初期バージョンからあるやり方。他の方法ができない場合を除き使うべきでは無い。最新バージョンではこの関数自体が別モジュールであるcreate-react-classに分離されている。
2. ES6 Classを使って作成する。
ES6から追加されたclass構文を使用するやり方。TypeScriptやCoffeeScriptのクラスでも作成は可能。
3. 関数として作成する。(関数コンポーネント)
関数がそのままコンポーネントになるやり方。render()メソッドしかないES6 Classのようなもの。状態(state)は持てないし、ほかのコンポーネントの機能も使えない。

質問で書いているコードは3.になります。なお、アロー関数である必要は無く、functionを使った関数宣言や関数式でもかまいません。上でも述べてますが、この3.の方法は機能が制限された方法です。ですが、この方法が便利であるとして、追加されました。

本来、ReactはViewにのみを目的としたライブラリです。状態変化やコントロールなどはViewの部分と分離すべきと言う考えがあり、究極的には、純粋関数で収まるべきとの考えがあります。それを究極的に勧めていくと、もはやコンポーネントにはrender()のみしか必要ではありません。それなら、初めから一つの関数で十分じゃ無いかということで作られたのが、3.の関数コンポーネントです。

もし、どうしてもcomponentDidMount()を使いたいというのであれば、関数コンポーネントを使うこと自体が間違っています。2.のES6 Classを使用してください(ES6が使用できないと言うことが無い限り、1.は使用しない方が良いです)。関数コンポーネントの思想、つまりは、純粋関数としてコンポーネントを使いたいというのであれば、状態遷移などを管理するところの設計が間違っています。コンポーネントが状態を持ったり、コンポーネントの遷移で何かが変わったりすべきではありません。コンポーネントがすることは、ボタン押下などのイベントの発行によるコールバックのみに収まるべきです。表示と状態が分離されていれば、componentDidMount()のような機能がReactのコンポーネントに必要になることはありません。

投稿2017/12/02 12:12

raccy

総合スコア21733

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

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

drizzing20

2017/12/02 12:51

詳しい説明ありがとうございました!
maisumakun

2020/11/11 11:24

なお、後にReact Hooksというものが登場して、記法はかなり違いますがcomponentDidMountと同等のことを関数コンポーネントで実装可能となっています。
kuro3

2020/11/11 13:43 編集

arrow 関数で実装するのであれば、`useEffect` React Hooksを使うといいですよ ```jsx import * as React from 'react'; const Sample = () => { // FYI: https://ja.reactjs.org/docs/hooks-reference.html#useeffect React.useEffect(()=> { console.log('tart'); return () => { console.log('like componentDidMount: end'); } }) return ( <div className='Sample'> <h2>Sample</h2> </div> ); }; export default Sample; ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問