So verwenden Sie ReactJS, um Elemente auszublenden

Question

Ich möchte einen Text auf dem Bildschirm anzeigen und ihn nur ausblenden, wenn eine Taste gedrückt wird, weiß aber nicht, wie das geht. Ich möchte useState verwenden, um diesen Effekt zu erzielen:

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

Das Problem, das ich festgestellt habe, ist, dass die Seite neu gerendert wird, wenn auf die Schaltfläche geklickt wird, und der Sichtbarkeitswert auf den Standardwert (true) geändert wird. was soll ich machen?

Answer 1

Idk what are you experiencing but for me it works fine the following code:

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>
          
         </>
    )
    
    }