react怎麼實作顯示隱藏div

react實作顯示隱藏div的方法：1、在函數式元件內容中透過「{showoverlay? (

):null}」實作div的顯示隱藏；2、在業務邏輯中判斷visible的值，並透過在元件樣式中設定「style={{ display: `${visible ? '' : 'none'}` }}」即可。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react怎麼實作顯示隱藏div？

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 ? &#39;&#39; : &#39;none&#39;}` }}>
   组件内容
</div>

推薦學習：《react影片教學》

以上是react怎麼實作顯示隱藏div的詳細內容。更多資訊請關注PHP中文網其他相關文章！