Comment utiliser ReactJS pour masquer des éléments

Question

Je souhaite afficher un texte à l'écran et le masquer uniquement lorsque vous appuyez sur un bouton, mais je ne sais pas comment faire. Je souhaite utiliser useState pour obtenir cet effet :

const [textVisibility, setTextVisibility] = useState(true)
<button onClick={() => setTextVisibility(false)} />

Le problème que j'ai trouvé est que lorsque vous cliquez sur le bouton, la page sera restituée et la valeur de visibilité passera à la valeur par défaut (vrai). Que dois-je faire?

Answer 1

Je ne sais pas, qu'est-ce que tu vis, mais pour moi, ça fonctionne bien, le code suivant :

import React from 'react';
import {useState} from 'react';

export function App(props) {
  const [textVisibility, setTextVisibility] = useState(true)


  return (
    <div className='App'>
      {textVisibility && <h1 onClick={() => setTextVisibility(!textVisibility)}>Hello React.</h1>}
      
      <button onClick={() => setTextVisibility(false)}>Invisible</button>
      <button onClick={() => setTextVisibility(true)}>Visible</button>
    </div>
  );
}

Answer 2

const App(){
    
    const [isVisible, setIsVisible] = useState(false)
    
    return (
            <>
            {isVisible ? <label> 点击按钮后将显示此文本 </label> : null 
   }
            <button onClick={()=>setIsVisible(true)}>点击显示</button>
          
         </>
    )
    
    }