React（Java Script）アロー関数の文法と、ハマった罠

はじめに

今回の記事の目的

アロー関数は、無名関数を簡単に記載できる便利な記法だが、省略できるパターンが多いためバグを引き起こし、原因究明に時間がかかってしまった。

同じ罠にはまらないためにメモ。

アロー関数の書き方

基本の書き方

const func1 = (str) => {
      return  str;
};

引数が1つのときは( )を省略できる。

const func1 = str => {
      return  str;
};

中の処理が1行で終わる場合は、returnと{ }を省略できる。

const func1 = str => str;
};

はまった罠

React講座勉強中に書いてしまったコード

const func = ( 引数 ) => {
     <Switch>
            処理
     </Switch>
};       

コンパイルは通ってしまい、funcに何も返却されないという動きになってしまった。

こう書いてみると単純なミスだが、引数も複雑で、処理も複雑なので、混乱した。

正しく修正したコード

ちゃんとreturn文を書く。

const func = ( 引数 ) => {
  return (
    <Switch>
　　　処理
    </Switch>
  );
}; 

または、returnと{ }を省略して

const func = ( 引数 ) => (
  <Switch>
　　処理
  </Switch>
);

でもよい。