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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了紅旗免費建站歡迎大家使用！

react實現(xiàn)顯示隱藏div的方法：1、在函數(shù)式組件內(nèi)容中通過“{showoverlay? (

):null}”實現(xiàn)div的顯示隱藏；2、在業(yè)務(wù)邏輯中判斷visible的取值，并通過在組件樣式中設(shè)置“style={{ display: `${visible ? '' : 'none'}` }}”即可。

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

第一種方法

1.函數(shù)式組件

代碼如下（示例）：

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

2.類組件

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

代碼如下（示例）：

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

第二種方法

//在業(yè)務(wù)邏輯中判斷visible的取值
const [visible, setVisible] = useState(false);
//組件樣式中設(shè)置

   組件內(nèi)容