[解決済み] jsxの中のif-else文。ReactJS

質問

レンダリング関数を変更し、特定の状態が与えられたときに、いくつかのサブレンダリング関数を実行する必要があります。

例えば

render() {
    return (   
        <View style={styles.container}>
            if (this.state == 'news'){
                return (
                    <Text>data</Text>
                )
            }
        </View>
    )
}

シーンを変更せずに、タブを使用して動的にコンテンツを変更することを実装するには、どうすればよいでしょうか。

どのように解決するのですか？

以下の通りです。 DOC :

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

基本的なルールです。

JSXは基本的に 構文解析 . コンパイル後、JSX式は通常のJavaScript関数呼び出しとなり、JavaScriptオブジェクトに評価されます。私たちは任意の JavaScript式 を中括弧で囲んでJSXに埋め込むことができます。

しかし、文ではなく式だけです。つまり、直接的にはどんな文も置くことができません ( if-else/switch/for ) を入れることはできません。 JSX .

要素を条件付きでレンダリングしたい場合は ternary operator を使用します。

render() {
    return (   
        <View style={styles.container}>
            {this.state.value == 'news'? <Text>data</Text>: null }
        </View>
    )
}

もう一つの方法は jsx から関数を呼び出し、すべての if-else のロジックをその中に入れて、このようにします。

renderElement(){
   if(this.state.value == 'news')
      return <Text>data</Text>;
   return null;
}

render() {
    return (   
        <View style={styles.container}>
            { this.renderElement() }
        </View>
    )
}