ES6におけるReactコンポーネントの書き換えについて
用途に併せてコンポーネントを書き分けよう
eslintに従いクラスコンポーネントを書き換えるケースがよくあるので、サンプルを貼っておきます。 たくさん書いてありますが、全て結果としては同じ内容を表現しています。
クラスコンポーネント(class)
- 以下のようなクラスを作るのが最も万能ですが、内容に対してコードが長くなる場合があります。
import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div>Hello {this.props.name} !</div> ); } } App.propTypes = { myName: React.PropTypes.string.isRequired, };
メソッドコンポーネント(function)
- メソッド単体でもコンポーネントとして利用できます。
- { myName }はpropsオブジェクト下のキーを具体的に定義しています。
- 省略していますが、第1引数propsの後に第2引数contextを受け取ることができます。
import React from 'react'; export default function App({ myName }) { return ( <div>Hello {myName} !</div> ); } App.propTypes = { myName: React.PropTypes.string.isRequired, };
メソッドコンポーネント(const)
- 上記をアロー関数で置き換えたものをconst値として渡しています。
- constは直接defaultのexportに設定できませんが、以下のように書くとdefaultに設定できます。
import React from 'react'; const App = ({ myName }) => { return ( <div>Hello {myName} !</div> ); }; App.propTypes = { myName: React.PropTypes.string.isRequired, }; export default App;
- コンポーネントの戻り値は必ずjsxなので、処理が複雑でない限りは以下のような書き方がベストです。
import React from 'react'; const App = ({ myName }) => ( <div>Hello {myName} !</div> ); App.propTypes = { myName: React.PropTypes.string.isRequired, }; export default App;
- 丸括弧がアロー関数の戻り値を表していたり、JSXを内包していたりとわかりづらいですが、どちらも省略可能なので、以下のようにも書けたりします。
- ここまで省略すると若干読みづらい感じもします。
import React from 'react'; const App = ({ myName }) => <div>Hello {myName} !</div>; App.propTypes = { myName: React.PropTypes.string.isRequired, }; export default App;