react如何實(shí)現(xiàn)顯示隱藏div

本文小編為大家詳細(xì)介紹“react如何實(shí)現(xiàn)顯示隱藏div”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“react如何實(shí)現(xiàn)顯示隱藏div”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

react實(shí)現(xiàn)顯示隱藏div的方法：1、在函數(shù)式組件內(nèi)容中通過“{showoverlay? (<div></div>):null}”實(shí)現(xiàn)div的顯示隱藏；2、在業(yè)務(wù)邏輯中判斷visible的取值，并通過在組件樣式中設(shè)置“style={{ display: `${visible ? '' : 'none'}` }}”即可。

react函數(shù)式組件下如何隱藏和顯示一個組件（兩種方法）

第一種方法

1.函數(shù)式組件

代碼如下（示例）：

//函數(shù)式組件內(nèi)容中
 const [showoverlay, setshowoverlay] = useState(false);
//渲染時,運(yùn)算符
return(
     <>
     {showoverlay? (<div>顯示或隱藏</div>):null}
     </>
)

2.類組件

網(wǎng)上舉例基本都是類組件下的操作。

代碼如下（示例）：

//構(gòu)造函數(shù)中
constructor(props) {
    super(props);
    this.state = {showWarning: true}
  }
 //渲染時
      <>
  { this.state.showWarning?
        <div>顯示或隱藏</div> :null
        }
      </>

第二種方法

//在業(yè)務(wù)邏輯中判斷visible的取值
const [visible, setVisible] = useState<boolean>(false);
//組件樣式中設(shè)置
<div className="overlaydiv" ref={overlayContainerRef} style={{ display: `${visible ? '' : 'none'}` }}>
   組件內(nèi)容
</div>

讀到這里，這篇“react如何實(shí)現(xiàn)顯示隱藏div”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。