Rendu conditionnel dans React –

L’approche de rendu déclaratif de React vous permet d’écrire rapidement des composants riches combinant mise en page, présentation et logique. Cependant, cela peut compliquer le rendu conditionnel des sections de l’interface utilisateur. Voici quelques méthodes que vous pouvez utiliser pour afficher les composants à la demande.

Comprendre le problème

Les systèmes de modèles traditionnels facilitent la mise en œuvre du rendu conditionnel. Voici comment procéder dans Handlebars, un moteur de création de modèles JavaScript:

<div class="profile">
{{#if user}}
<p>You are logged in!</p>
{{else}}
<a href="/login">Login</a>
</div>
{{/if}}

Lorsque vous travaillez dans React, vous allez généralement écrire JSX. Bien que JSX regards comme le HTML, il est transpilé par le processus de construction de React en JavaScript normal. Cela se termine par une série de React.createElement() appels.

Cela signifie que vous ne pouvez pas utiliser des conditions JavaScript non modifiées dans JSX. Essayer de faire quelque chose comme ça provoquera une erreur de compilation:

const MyComponent = props => {
    return (
        <div>
            if (props.user) {
                <p>You are logged in!</p>
            }
            else <a href="/login">Login</a>
        </div>
    );
};

Si les déclarations dans JSX nécessitent un peu plus de réflexion. Vous pouvez choisir parmi plusieurs approches. L’option que vous choisissez variera en fonction de la complexité de la condition, s’il y a un else branche, et si cela nuira à la lisibilité de votre code.

Sortie de JSX

Le moyen le plus simple de corriger le code ci-dessus est de lever le if hors de return déclaration:

const MyComponent = props => {
    if (props.user) {
        return <p>You are logged in!</p>;
    }
    else {
        return <a href="/login">Login</a>;
    }
};

La condition a été supprimée du JSX. Deux nœuds JSX indépendants sont utilisés à la place, celui à renvoyer étant déterminé par un if instruction dans le corps de la fonction. Cette approche est clairement compréhensible et maintient les deux branches complètement séparées.

Utilisation d’expressions conditionnelles

La solution ci-dessus ne fonctionnera généralement que dans les composants les plus simples. Vous avez tendance à dupliquer du code, tel que le <div> présent dans les deux nœuds JSX de l’exemple.

La plupart du temps, vous aurez besoin de quelque chose de plus élégant. JSX prend en charge les expressions JavaScript entourées d’accolades ({}). Vous pouvez utiliser des comparaisons booléennes et l’opérateur ternaire pour obtenir un rendu conditionnel en ligne.

const MyComponent = props => {
    return (
        <div>
            {props.user ? <p>You are logged in!</p> : <a href="/login">Login</a>}
        </div>
    );
};

Cet exemple fonctionne comme prévu sans aucune duplication de code. Lorsque l’utilisateur est authentifié, le texte connecté s’affiche. Lorsque l’utilisateur est déconnecté, l’expression prend la valeur false afin que le lien de connexion apparaisse.

Les expressions en ligne sont la technique de rendu conditionnel JSX la plus couramment utilisée. Cependant, ils peuvent être exigeants sur le plan cognitif, en particulier si les valeurs de retour vrai et faux sont elles-mêmes des expressions. Lorsqu’une expression devient lourde, vous pouvez l’étendre sur plusieurs lignes. Cela peut améliorer la lisibilité et aider à maintenir votre fichier dans les limites de longueur de ligne imposées par votre linter.

Scénarios où il n’y a pas d ‘«autre»

Adaptons maintenant l’exemple ci-dessus en supprimant le texte «vous êtes connecté». Notre chef de produit a décidé que ce n’était pas nécessaire dans cette section de l’application. Le conteneur <div> devrait maintenant être vide lorsque l’utilisateur est connecté.

React vous permet de revenir null pour indiquer qu’il n’y a rien à rendre. Ajustez l’expression conditionnelle du composant en conséquence.

const MyComponent = props => {
    return (
        <div>
            {props.user ? null : <a href="/login">Login</a>}
        </div>
    );
};

React prend également en charge false avec la même signification que null. Cela signifie que vous pouvez raccourcir ce qui précède en utilisant JavaScript && (et) pour effectuer une comparaison booléenne.

const MyComponent = props => {
    return (
        <div>
            {!props.user && <a href="/login">Login</a>}
        </div>
    );
};

Le côté gauche de l’expression sera évalué à false lorsque l’utilisateur est connecté. Comme les deux côtés sont joints par un and, l’expression globale évalue également false. Par conséquent, rien n’est rendu lorsque l’utilisateur est connecté.

Une fois déconnecté, le côté gauche évalue true. Le côté droit sera toujours véridique car il se résout en un objet JavaScript lorsque le JSX est transpilé. Cette forme d’évaluation renvoie le côté droit de l’expression afin que le lien de connexion finisse par être rendu.

Les évaluations JavaScript sont «court-circuitées». Cela signifie que le JSX sur le côté droit ne sera pas inutilement construit si l’expression de gauche évalue à false.

Valeurs de prop conditionnelles

Vous pouvez rendre les valeurs des accessoires conditionnelles à l’aide d’expressions incorporées dans le même style que celles illustrées ci-dessus. Utilisez une évaluation conditionnelle ou ternaire pour déterminer la valeur à fournir. Renvoyer une valeur de undefined équivaut à ne pas spécifier le prop.

const MyComponent = props => {
    return (
        <div>
            <a href={(props.user.loggedIn === true) ? "/dashboard" : "/home"}>
                Home
            </a>
        </div>
    );
};

Dans cet exemple, la destination du lien «Accueil» est ajustée dynamiquement selon que l’utilisateur est connecté ou non. N’oubliez pas que les accessoires d’un composant dans JSX sont transpilés en un objet JavaScript simple, c’est pourquoi cette technique fonctionne. Vous écrivez vraiment ce qui suit:

React.createElement("a", {
    href: (props.user.loggedIn === true) ? "/dashboard" : "/home"
});

JSX est simplement une extension de syntaxe JavaScript qui vous permet de déclarer les composants React sous une forme rappelant le HTML.

Conditions utilisant des composants logiques

Une autre façon d’obtenir un rendu conditionnel est d’incorporer des composants dits «logiques» dans votre projet. Ce sont des composants simples qui ne rendent leurs enfants que si une condition est remplie.

const IfComponent = props => {
    if (props.condition) return props.children;
    else return null;
}
 
const MyComponent = props => (
    <IfComponent condition={props.user.isLoggedIn}>
        <a href="/logout">Logout</a>
    </IfComponent>
);

Ce modèle peut rendre le code de votre render() fonction plus intuitive. Cependant, il y a un gros problème: le a l’élément sera toujours rendu, même si l’élément if la condition n’est pas remplie. Vous pouvez résoudre ce problème en adaptant IfComponent pour qu’il appelle une fonction au lieu de rendre children directement.

const IfComponent = props => {
    if (props.condition) return props.renderChildren();
    else return null;
}
 
const renderContent = () => <a href="/logout">Logout</a>;
 
const MyComponent = props => (
    <IfComponent
        condition={props.user.isLoggedIn}
        renderContent={renderContent} />
);

Maintenant le a L’élément n’est construit que lorsque la condition est réellement remplie. Cela réduit les redistributions inutiles, ce qui améliorera les performances lors de l’utilisation de composants complexes.

Une variante de ce modèle consiste à créer un composant d’ordre supérieur (HOC). Cela vous permet d’encapsuler un composant avec des fonctionnalités conditionnelles.

const ifHoc = (condition, component) => {
    return props => {
        if (condition()) return component(props);
        else return null;
    };
}
 
const LogoutLink = () => <a href="/logout">Logout</a>;
 
const LogoutLinkOnlyWhenLoggedIn = ifHoc(props => props.loggedIn, LoginLink);
-
const ComponentUsingLoginLink = props => (
    <LogoutLinkOnlyWhenLoggedIn loggedIn={props.user.isLoggedIn} />
);

Cette approche peut être un peu plus difficile à comprendre au début. Il est préférable de conserver le composant à restituer complètement séparé de la logique conditionnelle. Il permet également la réutilisation de la logique complexe, car tout composant peut être enveloppé avec ifHoc(). Le HOC encapsule le composant d’origine et ne le restitue que lorsque la fonction conditionnelle transmise retourne true.

Les problèmes de performance

Quelques considérations générales sur les performances s’appliquent à tous les rendus conditionnels dans React. Le plus important est de limiter le rendu autant que possible. Essayez de ne pas remplacer de gros morceaux d’interface utilisateur dans les composants de présentation. Trop de rendu peut rapidement créer une sensation de «sensation de lenteur».

De même, sachez que vos expressions conditionnelles seront généralement évaluées à chaque rendu de votre composant. Si les conditions elles-mêmes sont complexes (comme le mappage d’un tableau d’objets dans de nouveaux objets), cela peut également créer un ralentissement, en particulier sur le matériel bas de gamme.

Conclusion

React vous oblige à aborder le rendu conditionnel légèrement différemment des systèmes de modèles traditionnels. C’est parce que JSX uniquement regards comme HTML. Il est retransformé en objets JavaScript, qui sont ensuite utilisés avec les appels de fonction React.

Néanmoins, diverses options sont disponibles lorsque vous devez effectuer le rendu conditionnel d’un composant. L’option la plus simple consiste généralement à écrire des expressions conditionnelles dans votre JSX, soit en utilisant && ou la syntaxe ternaire. Vous pouvez vous replier sur un vrai if à la racine de votre render() ou adoptez un composant d’ordre supérieur si les expressions JSX rendaient votre flux de rendu plus difficile à comprendre.