Comment implémenter le rendu conditionnel dans ReactJS JSX ?

Utilisation des instructions if-else dans ReactJS JSX

Dans ReactJS, les instructions if-else ne peuvent pas être utilisées directement dans JSX. En effet, JSX se transforme en appels de fonction JavaScript et les instructions if-else ne sont pas compatibles avec cette syntaxe.

Rendu conditionnel avec opérateur ternaire

Une approche pour le rendu conditionnel consiste à utiliser l'opérateur ternaire :

render() {
    return (
        <View>

Dans cet exemple, si la valeur de la propriété d'état est égale 'news', l'élément Text avec le contenu 'data' est rendu. Sinon, null est rendu, ce qui masque efficacement l'élément.

Rendu conditionnel basé sur une fonction

Une autre option consiste à créer une fonction pour gérer le rendu conditionnel et à l'appeler depuis JSX :

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

render() {
    return (
        <View>

Dans ce cas, la fonction renderElement() vérifie l'état de la valeur et renvoie soit l'élément Text, soit null. Le JSX appelle ensuite la fonction renderElement() pour restituer conditionnellement l'élément souhaité.

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!