Le rendu conditionnel dans React vous permet de restituer différents composants ou éléments en fonction de certaines conditions, telles que l'état ou les accessoires. Voici quelques méthodes courantes pour obtenir un rendu conditionnel :

1. Utilisation des instructions If-Else

Vous pouvez utiliser des instructions if-else JavaScript standard dans votre composant.

function MyComponent({ isLoggedIn }) {
    if (isLoggedIn) {
        return 
Welcome back!
;
    } else {
        return 
Please sign in.
;
    }
}

2. Utilisation d'opérateurs ternaires

Il s'agit d'une manière concise d'afficher du contenu en fonction d'une condition.

function MyComponent({ isLoggedIn }) {
    return (
        

            {isLoggedIn ? 'Welcome back!' : 'Please sign in.'}
        
    );
}

3. Utilisation de l'opérateur logique &&

Vous pouvez utiliser l'opérateur logique ET pour afficher un composant uniquement si une condition est vraie.

function MyComponent({ isLoggedIn }) {
    return (
        

            {isLoggedIn && 
Welcome back!
}
            {!isLoggedIn && 
Please sign in.
}
        
    );
}

4. Instruction de commutation

Pour des conditions plus complexes, vous pouvez utiliser une instruction switch.

function MyComponent({ status }) {
    switch (status) {
        case 'loading':
            return 
Loading...
;
        case 'success':
            return 
Data loaded successfully!
;
        case 'error':
            return 
There was an error!
;
        default:
            return null;
    }
}

Exemple

Voici un exemple complet utilisant des composants fonctionnels :

import React from 'react';

function App() {
    const [isLoggedIn, setIsLoggedIn] = React.useState(false);

    return (
        

             setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Logout' : 'Login'}
            
            {isLoggedIn ? 
Welcome back!
 : 
Please sign in.
}
        
    );
}

export default App;

Résumé

Choisissez la méthode qui correspond le mieux à vos besoins en fonction de la complexité de vos conditions et de votre style de codage personnel. Faites-moi savoir si vous avez besoin de plus d'exemples ou d'explications !