Rendu conditionnel dans React

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. Utiliser les instructions If-Else

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

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

2. Utiliser les opérateurs ternaires

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

function MyComponent({ isLoggedIn }) {
    return (
        <h1>
            {isLoggedIn ? 'Welcome back!' : 'Please sign in.'}
        </h1>
    );
}

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 (
        <div>
            {isLoggedIn && <h1>Welcome back!</h1>}
            {!isLoggedIn && <h1>Please sign in.</h1>}
        </div>
    );
}

4. Déclaration de changement

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

function MyComponent({ status }) {
    switch (status) {
        case 'loading':
            return <h1>Loading...</h1>;
        case 'success':
            return <h1>Data loaded successfully!</h1>;
        case 'error':
            return <h1>There was an error!</h1>;
        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 (
        <div>
            <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Logout' : 'Login'}
            </button>
            {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
        </div>
    );
}

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 !

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!