Version imprimable du sujet

Cliquez ici pour voir ce sujet dans son format original

Forums MacBidouille _ La Programmation En Général _ Comment implémenter le rendu conditionnel dans les composants React ?

Écrit par : alfranz 28 Jul 2023, 13:37

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 https://www.scaler.com/topics/software-engineering/web-development-roadmap/ 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.

Écrit par : hellomorld 29 Jul 2023, 09:06

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

Écrit par : Jaypee 30 Jul 2023, 16:39

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

Propulsé par Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)