【react-native】react・react-nativeそれぞれの三項演算子の書き方について

reactとreact-nativeでは三項演算子の書き方が少し違います。

例えば、reactでは以下のように書くことで三項演算子は通じます

</pre>
{this.state.isClicked ? "SanFrancisco" : ''}
<pre>

ですがreact-nativeだと、それぞれの処理結果がテキストだった場合はエラーが起きてしまいます。

この場合は、処理結果を変数の中に入れて返すことで解決させることができます。

また、偽の場合に処理を空文字でふっていますがこれもダメ。

正しく参考演算子を行う場合は空白でなくnullを使いましょう。

問題のreact-nativeにおける正しい三項演算子の式は以下の通り

</pre>
const city_text = "SanFrancisco";

{this.state.isClicked ? city_text : null}
<pre>

テキストを変数に入れ、空白をnullにいれているのが見てとれると思います。

ここはとりあえず生のテキストをJSXに放り込むなと認識しておけば間違いないでしょう。

今回に限らずreactとreact-nativeの作法は微妙に違ってくるのでやればやるほどその違いに

惑わされると思います。二刀流だよという人は混乱してしまいますね。