ReactのComponentの中での条件分岐

子要素を分岐させたい時のメモ。
基本的に、子要素はReact.createElementの第3引数になるので、
JSXのタグの間に挟まるものは式ではなくてはならない。
が、javascriptのifは式ではなくて文なので少し面倒。

対応策1:三項演算子を使う

三項演算子を使えば文ではなく式になるのでOK

<div>
 {someCondition ? <Hoge/> :<PIYO/>}
</div>

対応策2

無名関数中でif+returnを書き即実行する。

<div>
  {(() => {
      if(someCondition){
         return <HOGE/>;
      }
      return <PIYO/>;
    })()}
</div>

対応策3

対応策2の応用で関数部分を関数コンポーネント化する

const HogePiyo = (props) => {
      if(props.someCondition){
         return <HOGE/>;
      }
      return <PIYO/>;
    };


//中略
render () {
  return ( <div>
             <HogePiyo someCondition={someCondition}/>
           </div>);
}