Reactで呼び出す子コンポーネントを条件分岐させる方法

Reactで、条件によって表示させるコンポーネントを切り分けたい時などに、条件分岐によって切り分ける方法

記法

    var ${変数名};
    if (条件文1) {
        ${変数名}; = ${コンポーネント1};
    } else {
        ${変数名}; = ${コンポーネント2};
    }
    return (
      <div>
        {${変数名}}
      </div>
    );

例

例では『子コンポーネント(以下)』が、『親コンポーネント』から受け取ったprops(mode)によって呼び出す『孫コンポーネント(ComponentAとB)』を変更しています。

・
・
render: function() {
    var whichComponent;
    if (this.props.mode == 'A') {
        whichComponent = <ComponentA />;
    } else if (this.props.mode == 'B') {
        whichComponent = <ComponentB />;
    }
    return (
      <div>
        {whichComponent}
      </div>
    );
・
・