小ネタです。( ; ˘ω˘) でも便利そうだから共有…。
React.js の JSX の中で If-Else をやりたいです。 (,,･`_´･)、ｷﾘｯ
2015年4月29日現在のドキュメントには次のような方法が書かれていますが…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var loginButton; if (loggedIn) { loginButton = <LogoutButton />; } else { loginButton = <LoginButton />; } return ( <nav> <Home /> {loginButton} </nav> ) |
ただこれ、JSXの流れが分離してしまって、ちょっと嫌な感じです。こうでなくて、インラインで書きたい時もあるかなーと思います。
そこで小ネタですが、三項演算子を使って次のようにも書けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var isNew = true; return ( <div> {(isNew ? function() { return <div> 新しいよ！ (*´∀`*) </div> } : function() { return <div> 新しくないよ！ (-_-`;) </div> }).call(this)} </div> ); |
これならブロックもどんどん書けますね！
みんな思いつきそうな小ネタですみませんでした。( ; ˘ω˘)
あと、他にもっとキレイな書き方あったら教えてください。