3
votes

comment écrire if else inside render return react native

Je veux écrire if-else dans render return . Je veux écrire if ImageSource === null alors je veux obtenir le code ci-dessous.

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
      <View style={styles.ImageContainer}>
        {this.state.ImageSource === null ? <Text>Select a Photo</Text> :
          <Image style={styles.ImageContainer} source={this.state.ImageSource} />
        }
      </View>
    </TouchableOpacity>

voici le retour de rendu intérieur

    ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled photo picker');
  }
  else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  }
  else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  }
  else {
    let source = { uri: response.uri };
    this.setState({
      ImageSource: source,
      data: response.data

    });
  }
});

autre Je veux obtenir l'image téléchargée. p >

javascript react-native

7 commentaires

Quel est le problème dans ce code?

@Prasheel Ce code pas de problème, je veux implémenter if else à l'intérieur du code. ImageSource === null le code ci-dessus sinon je veux obtenir l'image téléchargée

Je n'ai vu aucun problème dans le code.

@Nirmalsinh, merci pour votre réponse. le code peut fonctionner mais je veux implémenter if-else dans le code.

Quelle est la valeur par défaut pour ImageSource?

@Nirmalsinh J'ai déjà mis à jour mon code dans la question

Copie possible de Comment écrire si condition avec deux déclaration dans React Native

5 Réponses :

0
votes

Essayez d'ajouter des parenthèses et faites-moi savoir si cela a fonctionné.

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
    <View style={styles.ImageContainer}>
        {this.state.ImageSource === null ? (
            <Text>Select a Photo</Text> 
        ):(
          <Image style={styles.ImageContainer} source={this.state.ImageSource} />
        )}
     </View>
</TouchableOpacity>

3 commentaires

Merci pour votre réponse. Ce code peut fonctionner. J'ai le bogue sur l'image manquant quand en arrière toujours là. J'essaye de mettre if else dans le code mais je ne peux pas fonctionner.

@qing Pensez-vous que je devrais laisser cette réponse ou devrais-je la supprimer?

ce code aucune erreur ne peut fonctionner mais ne peut pas résoudre mon bug. Pas de problème si vous souhaitez le supprimer. Si vous voulez laisser cette réponse, pas de problème également. En tout cas merci pour votre réponse et aidez-moi. Merci beaucoup :)

0
votes

Je ne trouve rien de mal dans votre code?

ou vous pouvez essayer de cette façon.

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
  <View style={styles.ImageContainer}>

    {!this.state.ImageSource && <Text>Select a Photo</Text> }
    {this.state.ImageSource && <Image style={styles.ImageContainer} source={this.state.ImageSource} />
    }
  </View>
</TouchableOpacity>

1 commentaires

Merci pour votre réponse. J'ai le bogue sur l'image manquant quand en arrière toujours là.

0
votes

Cela se produit généralement lorsque vous effectuez un rendu conditionnel en ligne comme

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
  <View style={styles.ImageContainer}>
    {this.state.ImageSource === null && <Text>Select a Photo</Text> }
    { this.state.ImageSource &&  <Image style={styles.ImageContainer} source={this.state.ImageSource} />
    }
  </View>
</TouchableOpacity>

qui rendra MyComponent si var est vrai. Mais il a essayé de rendre la valeur de var. Le correctif est de modifier les conditions pour vous assurer qu'il s'agit d'une expression booléenne comme

{var !== 0 && <MyComponent/ >}.

afin que vous puissiez changer votre code comme ceci

{var && <MyComponent />}

cela devrait fonctionner! pour plus de détails, reportez-vous à ce fil

0 commentaires

2
votes

Mettez à jour votre condition ImageSource condition avec non défini

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
      <View style={styles.ImageContainer}>
        {this.state.ImageSource === undefined || this.state.ImageSouce === null ? <Text>Select a Photo</Text> :
          <Image style={styles.ImageContainer} source={this.state.ImageSource} />
        }
      </View>
    </TouchableOpacity>

4 commentaires

ont toujours le bogue sur l'image manquante

Peut-on parler vai skype ou autre moyen? Je peux donc vous aider à résoudre le problème

Cela aidera pour les deux

Vous a envoyé une demande. Veuillez y répondre.

0
votes

Je vous suggère de diviser vos fonctions de rendu en plusieurs petites fonctions comme:

renderTitle = () => <Text>Select a Photo</Text> 

renderImage = () => <Image style={styles.ImageContainer} source={this.state.ImageSource} />

 render(){
  return <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
      <View style={styles.ImageContainer}>
        {this.state.ImageSource === null ? this.renderTitle() : this.renderImage()
        }
      </View>
    </TouchableOpacity>
}

0 commentaires