Comment implémenter le rendu conditionnel dans les composants React ? |
Bienvenue invité ( Connexion | Inscription )
Comment implémenter le rendu conditionnel dans les composants React ? |
28 Jul 2023, 13:37
Message
#1
|
|
Nouveau Membre Groupe : Membres Messages : 4 Inscrit : 27 Mar 2023 Membre no 217 569 |
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. |
|
|
29 Jul 2023, 09:06
Message
#2
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 6 166 Inscrit : 31 Oct 2003 Membre no 11 118 |
Vu que tu ne reçois pas de réponse, as-tu demandé à ChatGPT ? Ca pourrait au moins donner des pistes.
-------------------- |
|
|
30 Jul 2023, 16:39
Message
#3
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 2 486 Inscrit : 29 Aug 2002 Membre no 3 340 |
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. |
|
|
Nous sommes le : 24th September 2024 - 00:08 |