web-dev-qa-db-fra.com

déclaration if-else dans jsx: ReactJS

J'ai besoin de changer la fonction de rendu et d'exécuter une fonction de rendu secondaire 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 implémenter cela sans changer de scène, je vais utiliser des onglets pour changer le contenu de manière dynamique.

javascriptreactjsreact-native
32
user8026867

Selon DOC:

les instructions if-else ne fonctionnent pas dans JSX. En effet, JSX n’est qu’un sucre syntaxique pour les appels de fonctions et la construction d’objets.

Règle basique:

JSX est fondamentalement sucre syntaxique . Après la compilation, les expressions JSX deviennent des appels de fonction JavaScript normaux et sont évaluées en objets JavaScript. Nous pouvons incorporer n'importe quelle expression JavaScript dans JSX en l'enveloppant entre accolades.

Mais seulement des expressions, pas des déclarations, signifie directement que nous ne pouvons mettre aucune déclaration ( si-sinon/switch/for ) à l'intérieur de JSX .

Si vous voulez rendre l'élément de façon conditionnelle, utilisez ternary operator, comme ceci:

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

Une autre option est d'appeler une fonction de jsx et de mettre toute la logique if-else à l'intérieur, comme ceci:

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

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

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
  });
}
9
Manish

Je trouve que cette voie est la plus gentille:

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

Un plugin Babel vous permet d'écrire des instructions conditionnelles dans JSX sans avoir besoin de les échapper avec JavaScript ou d'écrire une classe wrapper. Cela s'appelle Commandes JSX :

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

Cela prend un peu de configuration en fonction de votre configuration Babel, mais vous n’aurez rien à importer et il offre tous les avantages du rendu conditionnel sans quitter JSX, ce qui laisse votre code très propre.

2
Chase Sandmann

Tu peux 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 pour récupérer des 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>
    }
}
1
Jagjot Singh
 render() {
     return (   
         <View style={styles.container}>
         (() => {                                                       
             if (this.state == 'news') {
                return  <Text>data</Text>
            }
            else 
             return  <Text></Text>
        })()
         </View>
     )
 }

https://react-cn.github.io/react/tips/if-else-in-JSX.html

0
user193679

D'habitude, je fais ça:

_renderNews () {
  if (this.state.page === 'news') {
    return <Text>{data}</Text>
  }
  return null
}

render () {
  return (
    <View>{this._renderNews}</View>
  )
}
0
Diego Mello

Qu'en est-il de switch case au lieu de if-else

  render() {
    switch (this.state.route) {
      case 'loginRoute':
        return (
            <Login changeRoute={this.changeRoute}
              changeName={this.changeName}
              changeRole={this.changeRole} />
        );
      case 'adminRoute':
        return (
            <DashboardAdmin
              role={this.state.role}
              name={this.state.name}
              changeRoute={this.changeRoute}
            />
        );
    }
0
Viraj Singh

Pour cela, nous pouvons utiliser l'opérateur ternaire ou, s'il n'y a qu'une seule condition, l'opérateur "&&" .Comme ceci: -

//This is for if else

render() {

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

}

//This is only for if or only for one condition

render() {

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

}

0
sneha
if(condition1){ image1
}esleif(condition2){ image2
}else{ image3
}

Pour des conditions multiples comme ci-dessus, vérifiez le code mentionné ci-dessous,

render(){
return(
{
       (condition1)?
       <Image source={require('')}/>:
       (condition2)?
       <Image source={require('')}/>:
       <Image source={require('')}/>:

}
);}
0
Abdul Karim Khan

Vous ne pouvez pas fournir la condition if-else dans le bloc de retour, utiliser le bloc ternaire, this.state sera un objet, vous ne devriez pas le comparer avec une valeur, voir quelle valeur d'état vous voulez vérifier, aussi return renvoie un seul élément, assurez-vous de les envelopper dans une vue.

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

     )
}
0
Shubham Khatri