Rendu conditionnel React

Dans React, vous pouvez utiliser des instructions conditionnelles JavaScript pour afficher dynamiquement des composants ou des éléments.

Voici plusieurs méthodes courantes pour gérer le rendu conditionnel dans React :

1. Utilisation d'instructions if

Utilisez des instructions if dans la méthode render ou dans la valeur de retour des composants fonctionnels pour décider quoi rendre.

Exemple

import React from 'react';
import ReactDOM from 'react-dom/client';

class MyComponent extends React.Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;
    let content;

    if (isLoggedIn) {
      content = <h1>Bon retour!</h1>;
    } else {
      content = <h1>Veuillez vous inscrire.</h1>;
    }

    return (
      <div>
        {content}
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

2. Utilisation de l'opérateur ternaire

En JSX, vous pouvez utiliser l'opérateur ternaire pour un rendu conditionnel concis.

Exemple

import React from 'react';
import ReactDOM from 'react-dom/client';

const MyComponent = (props) => {
  const isLoggedIn = props.isLoggedIn;

  return (
    <div>
      {isLoggedIn ? <h1>Bon retour!</h1> : <h1>Veuillez vous inscrire.</h1>}
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

3. Utilisation de l'opérateur logique AND (&&)

Dans JSX, vous pouvez utiliser l'opérateur logique AND (&&) pour le rendu conditionnel. Si la condition est vraie, l'élément suivant est rendu.

Exemple

import React from 'react';
import ReactDOM from 'react-dom/client';

const MyComponent = (props) => {
  const isLoggedIn = props.isLoggedIn;

  return (
    <div>
      {isLoggedIn && <h1>Bon retour!</h1>}
      {!isLoggedIn && <h1>Veuillez vous inscrire.</h1>}
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

4. Utilisation des instructions switch

Lorsque vous devez gérer plusieurs conditions, vous pouvez utiliser une instruction switch dans la méthode render.

Exemple

import React from 'react';
import ReactDOM from 'react-dom/client';

class MyComponent extends React.Component {
  render() {
    const userRole = this.props.userRole;
    let content;

    switch (userRole) {
      case 'admin':
        content = <h1>Bienvenue, Admin!</h1>;
        break;
      case 'user':
        content = <h1>Bienvenue, Utilisateur!</h1>;
        break;
      case 'guest':
        content = <h1>Bienvenue, Invité!</h1>;
        break;
      default:
        content = <h1>Qui êtes-vous ??</h1>;
    }

    return (
      <div>
        {content}
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent userRole="admin" />);

Résumé

  • ifinstruction: adapté à une utilisation dansrenderles méthodes ou la valeur de retour des composants de fonction pour déterminer le contenu de rendu.
  • opérateur ternaire: adapté au rendu conditionnel concis dans JSX.
  • ET logique (&&) opérateur: adapté au rendu conditionnel dans JSX. Lorsque la condition esttruealors rendre l'élément.
  • switchinstruction: adapté à la gestion de plusieurs conditions et au rendu de contenu différent.
Autres extensions