How to show and hide divs in react

React method to display and hide divs: 1. Use "{showoverlay? (

):null}" in the functional component content to display and hide divs; 2. Determine the value of visible in the business logic and set "style={{ display: `${visible ? '' : 'none'}` }}" in the component style.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to show and hide divs in react?

How to hide and show a component under react functional component (two methods)

The first method

1. Function The formula component

code is as follows (example):

//函数式组件内容中
 const [showoverlay, setshowoverlay] = useState(false);
//渲染时,运算符
return(
     <>
     {showoverlay? (<div>显示或隐藏</div>):null}
     </>
)

2. Class component

The online examples are basically operations under class components.

The code is as follows (example):

//构造函数中
constructor(props) {
    super(props);
    this.state = {showWarning: true}
  }
 //渲染时
      <>
  { this.state.showWarning?
        <div>显示或隐藏</div> :null
        }
      </>

Second method

//在业务逻辑中判断visible的取值
const [visible, setVisible] = useState<boolean>(false);
//组件样式中设置
<div className="overlaydiv" ref={overlayContainerRef} style={{ display: `${visible ? &#39;&#39; : &#39;none&#39;}` }}>
   组件内容
</div>

Recommended learning: "react video tutorial"

The above is the detailed content of How to show and hide divs in react. For more information, please follow other related articles on the PHP Chinese website!