react怎麼設定div高度

react設定div高度的方法：1、透過css方式實現div高度；2、在state中宣告一個物件C，並在該物件中存放更換按鈕的樣式，然後取得A並重新設定C中的“marginTop”即可。

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

react怎麼設定div高度？

react動態設定元素高度

使用react實作動態修改樣式(不建議使用此方式，除非沒有其他選擇)

如下圖所示：

#需求

實作圖中的更換按鈕緊接著圖片的右下方，圖片高度發送改變時，更換按鈕的位置也跟著改變。

思路

1.透過css方式實作（改方案暫時沒有解決方法)
2.利用react資料驅動視圖的特性
2.1 資料：在state中宣告一個物件C，該物件存放更換按鈕的樣式。
2.2 操作: 設 A = 圖片高度, B = 更換按鈕高度。圖片載入完成後，取得A並將重新給設定C中的marginTop。 (這個想法只需改變數據，不需要考慮視圖層)

完整程式碼

construct中

this.state = {
  updateBtnStyle :{
    fontSize: "12px",marginLeft:'20px',marginTop:'300px',
  }
}
//在class中定义的函数，如果需要使用到全局this，需要此操作
this.loading = this.loading.bind(this)

聲明操作函數loading

loading(){
    const imgHeight =  document.getElementById('facePhoto').height
    console.log('图片的高度',document.getElementById('facePhoto')?.height)
    if(imgHeight === Number.parseInt(this.state.updateBtnStyle.marginTop)+24) return
    else{
      this.setState({
        updateBtnStyle:{
          marginTop:document.getElementById('facePhoto')?.height-24+'px'
        }
      })
    }
}

視圖層偽代碼

<Item label="人脸照片" style={{ position: "relative" }} required>
    <img id={&#39;facePhoto&#39;} src={photo} alt=""  width="300" onLoad={this.loading} style={{float:&#39;left&#39;}}/>
    <Button size="small" style={updateBtnStyle}
      onClick={() => StateManage.set(updatePhotoProps, { visible: true })}>更换</Button>
 </Item>

過程遇到的問題

1.取得圖片的高度：
1.1 取得的時間：需要等圖片載入完成後取得其高度才有效，因此需要使用img的onLoad事件，確保取得圖片高度時，圖片已載入完成。
1.2 取得的方式: 圖片的寬高度是透過屬性height,width，而不是透過style設置，因此取得高度的方法=document.getElementById('xxx').height
2.宣告的函數沒有綁定this,導致無法使用setState

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

以上是react怎麼設定div高度的詳細內容。更多資訊請關注PHP中文網其他相關文章！