Webエンジニアの備忘録

およそ自己の作業メモとして残しております。

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;