少し前にJSX内で即時関数を使ってifを使う記事をかきましたが、良い点と悪い点があるということを書き忘れてしまったので補足します。
良い点はそのままjavascriptを使える点です。初心者のかたはreactの書き方自体まだおぼつかないという方もいると思います。
しかし、即時関数でカッコを複数付けるだけで定義したifの一文を配置したいコンポーネントが命令を読み込んでくれるという初心者のか
たにとっては変更が少なく感覚的に理解しやすい実装方法として使われていました。
次に悪い点の説明ですが、この関数のデメリットはやはりカッコー>{(())}が多くなり可読性に欠けてしまうという点です。
プロジェクトで機能の変更があり即時関数周りの修正が必要になった時とかは特に顕著で、まずカッコの境界線を切り分けた後に修正を
加えないといけなくなり、これにかなり神経を使ってしまうのではと感じました。これが自分ならまだしも他のチームメンバーが見たら
混乱してしまいますよね・・・。
デバッグ前に事前に説明するかコードをもっと簡潔に書いてあげるかしてできればストレスフリーで作業したいですしね。
自分も後からコードを読み返してなんとか気を使えないか悩んだ結果後者を選びました。下のコードを見てください。
render() {
const num = this.state.num;
return (
{ num=="1" && <select onChange={ e => this.setState({ward: e.target.value}) } defaultValue=""> { this.ward.map( d => <option value={d.value}>{d.label}</option>)} </select> } ); }[/java script]
ひいき目でみても綺麗とは言えないですが、カッコの数を減らしてシェイプアップさせました。&&を付けて変数numが1ならばselectタグ
を生成するように定義しています。カッコを消したことで格段に見やすくなりましたね。
1人でアプリを作るのにはなんてことはないのですが、大規模なプロジェクトではこのように細かいコードを修正する時でさえ
気を使わないと他のメンバーからなにこれ!みたいに突っ込まれかねないので、reactに慣れてきたなというかたは一度自分のコードを
見てみてください。小さいですが自分のプログラミングの技術向上にもなるので、気づいたらこれはおいしいと思って楽な気持ちで
取り組むといいかもですね。