react函数式组件下如何隐藏和显示一个组件（两种方法）

一、第一种方法

1.函数式组件

代码如下（示例）：

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

2.类组件

网上举例基本都是类组件下的操作。
代码如下（示例）：

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

一、第二种方法

//在业务逻辑中判断visible的取值
const [visible, setVisible] = useState<boolean>(false);

//组件样式中设置
<div className="overlaydiv" ref={
    
    overlayContainerRef} style={
    
    {
    
     display: `${
    
    visible ? '' : 'none'}` }}>
   组件内容
</div>