我怎样才能用reactjs在屏幕上隐藏一个元素答案

【问题标题】：how can i hide an element on screen with reactjs我怎样才能用reactjs在屏幕上隐藏一个元素
【发布时间】：2023-02-01 02:54:27
【问题描述】：

我希望文本显示在屏幕上并且仅在按下按钮时隐藏，但我不知道如何实现。我想像这样使用 useState ：

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

我发现的问题是，当单击按钮时，页面将再次呈现，可见性值将是默认值 (true)。我怎样才能做到这一点？

【问题讨论】：

这回答了你的问题了吗？ Show or hide element in React
根据该代码，当状态更改时，该值将为 false。你能提供minimal reproducible example吗？ Here's some documentation on how to create a React snippet。

标签： javascript reactjs react-hooks

【解决方案1】：

不知道你在经历什么，但对我来说，下面的代码工作正常：

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

【讨论】：

【解决方案2】：

    const App(){
    
    const [isVisible, setIsVisible] = useState(false)
    
    return (
            <>
            {isVisible ? <label> This text will be shown on button click </label> : null 
   }
            <button onClick={()=>setIsVisible(true)}>click to show </button>
          
         </>
    )
    
    }

【讨论】：