Comment implémenter le rendu conditionnel dans les composants React ?

[alfranz]

e travaille sur un projet de développement Web à l'aide de ReactOS et je rencontre des difficultés pour implémenter le rendu conditionnel dans mes composants React. Je souhaite afficher ou masquer conditionnellement certains éléments en fonction de l'état ou des accessoires de mes composants.

Par exemple, disons que j'ai un composant React simple qui affiche un bouton "Connexion" lorsque l'utilisateur n'est pas connecté et affiche un bouton "Déconnexion" lorsque l'utilisateur est connecté. J'ai essayé d'utiliser une instruction de base if/else , mais cela ne semble pas fonctionner comme prévu.

Voici ce que j'ai essayé jusqu'à présent :

Code

import React, { useState } from 'react';

const AuthButton = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  if (isLoggedIn) {
    return <button onClick={handleLogout}>Logout</button>;
  } else {
    return <button onClick={handleLogin}>Login</button>;
  }
};

Malheureusement, le bouton ne change pas d'état lorsque je clique dessus. Je soupçonne qu'il me manque peut-être quelque chose dans mon approche.

Bien que j'aie demandé de l'aide ici sur la feuille de route du développement Web, mais j'ai du mal à la comprendre. Quelqu'un pourrait-il me conseiller gentiment sur la façon de créer correctement un rendu conditionnel dans ReactOS? Existe-t-il une meilleure approche ou une approche suggérée pour faire face à cette situation ? Toute aide ou extrait de code serait très apprécié. Je suis reconnaissant.

[hellomorld]

Vu que tu ne reçois pas de réponse, as-tu demandé à ChatGPT ? Ca pourrait au moins donner des pistes.

[Jaypee]

Comme d'habitude, je n'y connais rien, ni à React, ni à JavaScript, mais je me permets de poser des questions...

Il ne manquerait pas quelque chose qui ferait un setState(...)

Je me réfère à cet exemple qui lui ressemble mais qui utilise explicitement un setState : https://legacy.reactjs.org/docs/hooks-state.html
En fait, non, ignore ma remarque, le setState est le code équivalent qui devrait être généré. Et donc, ton code est presque conforme à ce que l'example décrit.

Si on reproduit exactement l'exemple, ton code ressemblerait à çà :

Code

import React, { useState } from 'react';

function AuthButton() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (isLoggedIn ?
            <button onClick={() => setIsLoggedIn(false)}>Logout</button>:
            <button onClick={() => setIsLoggedIn(true)}>Login</button>);
}

@+JP

Ce message a été modifié par Jaypee - 31 Jul 2023, 08:04.