Comment implémenter le rendu conditionnel dans ReactJS sans utiliser d'instructions if-else ?

Rendu conditionnel dans ReactJS : instructions if-else en JSX

Dans ReactJS, les instructions if-else ne peuvent pas être utilisées directement dans les expressions JSX . Cela est dû à la nature de JSX, qui est un sucre syntaxique pour créer des appels de fonctions et des objets JavaScript.

Pour restituer conditionnellement des éléments en fonction de l'état, il existe des approches alternatives :

Opérateur ternaire :

Utilisez l'opérateur ternaire pour évaluer une condition et restituer différents éléments en fonction du résultat, comme indiqué ci-dessous :

render() {
    return (   
        <View>

Invocation de fonction :

Créez une fonction qui évalue la logique if-else et renvoie l'élément approprié. Ensuite, appelez la fonction depuis l'expression JSX :

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

render() {
    return (   
        <View>

En utilisant l'opérateur ternaire ou l'invocation de fonction, vous pouvez restituer conditionnellement des éléments dans ReactJS sans modifier la scène ni utiliser d'onglets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!