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> ); ・ ・