Instruction if-else dans jsx : ReactJS

Question

J'ai besoin de changer la fonction de rendu et de lancer une sous-fonction de rendu lorsqu'un état spécifique est donné,

Par exemple :

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

Comment puis-je mettre en œuvre cela sans modifier les scènes, je vais utiliser des onglets pour changer le contenu dynamiquement.

Answer 1

Conformément à DOC :

Les instructions if-else ne fonctionnent pas dans JSX. C'est parce que JSX est juste sucre syntaxique pour les appels de fonctions et la construction d'objets.

Règle de base :

JSX est fondamentalement sucre syntaxique . Après la compilation, les expressions JSX deviennent des appels de fonctions JavaScript ordinaires et sont évaluées en objets JavaScript. Nous pouvons intégrer n'importe quel Expression JavaScript en JSX en l'entourant d'accolades.

Mais seulement des expressions et non des déclarations, ce qui signifie que nous ne pouvons pas mettre directement une déclaration ( if-else/switch/for ) à l'intérieur JSX .

---

Si vous voulez rendre l'élément de manière conditionnelle, utilisez alors ternary operator comme ceci :

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

Une autre option consiste à appeler une fonction de jsx et mettre tous les if-else logique à l'intérieur de ça, comme ça :

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

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

Answer 2

Je trouve que cette façon de faire est la plus agréable :

{this.state.yourVariable === 'news' && <Text>{data}<Text/>}

Answer 3

J'aime ça et ça marche bien.

constructor() {
   super();

   this.state ={
     status:true
   }
}

render() {
   return( 

     { this.state.status === true ?
           <TouchableHighlight onPress={()=>this.hideView()}>
             <View style={styles.optionView}>
               <Text>Ok Fine :)</Text>
             </View>
          </TouchableHighlight>
           :
           <Text>Ok Fine.</Text>
     }
  );
}

hideView(){
  this.setState({
    home:!this.state.status
  });
}

Answer 4

Il existe un plugin Babel qui vous permet d'écrire des déclarations conditionnelles à l'intérieur de JSX sans avoir besoin de les échapper avec JavaScript ou d'écrire une classe wrapper. Il s'appelle Déclarations de contrôle JSX :

<View style={styles.container}>
  <If condition={ this.state == 'news' }>
    <Text>data</Text>
  </If>
</View>

Il nécessite un peu de mise en place en fonction de votre configuration Babel, mais vous n'avez pas besoin d'importer quoi que ce soit et il présente tous les avantages du rendu conditionnel sans quitter JSX, ce qui donne à votre code un aspect très propre.

Answer 5

Vous pouvez le faire. N'oubliez pas de mettre "return" avant votre composant JSX.

Exemple :

render() {
    if(this.state.page === 'news') {
        return <Text>This is news page</Text>;
    } else {
        return <Text>This is another page</Text>;
    }
}

Exemple de récupération de données sur Internet :

import React, { Component } from 'react';
import {
    View,
    Text
} from 'react-native';

export default class Test extends Component {
    constructor(props) {
        super(props);

        this.state = {
            bodyText: ''
        }
    }

    fetchData() {
        fetch('https://example.com').then((resp) => {
            this.setState({
                bodyText: resp._bodyText
            });
        });
    }

    componentDidMount() {
        this.fetchData();
    }

    render() {
        return <View style={{ flex: 1 }}>
            <Text>{this.state.bodyText}</Text>
        </View>
    }
}