Stack Overflow

 

1 User

1 Pocket

if-else statement inside jsx: ReactJS

https://stackoverflow.com/questions/44046037/if-else-statement-inside-jsx-reactjs

I need to change render function and run some sub render function when a specific state given, For example:render() { return ( <View style={styles.container}> if (

reactで、jsxの中で、ユーザーのログイン状態に応じて画面を変えるという実装をする必要があったので、そのやり方をログに残しておきます。

まず、基本ですが、JSXの内部では、if-else文は機能しません。これは、JSXが関数呼び出しやオブジェクト構築のための構文糖に過ぎないからです。

つまり、JSXは、基本的にはシンタクティックシュガーですから、コンパイルの後は、JSX の式は通常の JavaScript の関数呼び出しとなり、

JavaScript オブジェクトとして評価されます。そのため、中括弧で囲むことで、任意の JavaScript 式を JSX に埋め込むことができるわけですよね。

結果的に、直接JSXの中にステートメント（if-else/switch/for）を入れることはできません。

じゃあ、どうするかと言いますと、要素を条件付きでレンダリングしたい場合は、次のように三項演算子を使用します。

もしくは、jsxから関数を呼び出し、その中にすべてのif-elseロジックを入れることで、表現が可能です。

以上。