So legen Sie die Div-Höhe in React fest

So legen Sie die Div-Höhe in React fest: 1. Implementieren Sie die Div-Höhe über CSS. 2. Deklarieren Sie ein Objekt C im Status und speichern Sie den Stil der Änderungsschaltfläche im Objekt. Rufen Sie dann A ab und setzen Sie „marginTop“ zurück " in C "Das ist es.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie stelle ich die Div-Höhe in React ein?

React legt die Elementhöhe dynamisch fest.

Verwenden Sie React, um den Stil zu implementieren. Den Stil dynamisch ändern (diese Methode wird nicht empfohlen, es sei denn, es gibt keine andere Wahl).

Anforderungen

Der Ersatz-Button im Bild befindet sich sofort unten rechts im Bild. Wenn sich die Höhe des Bildes ändert, ändert sich auch die Position des Ersatz-Buttons.

Idee

1. Implementierung über CSS (es gibt noch keine Lösung für die Änderung des Plans)

2. Nutzen Sie die Eigenschaften der reaktionsdatengesteuerten Ansicht

2.1 Daten: Deklarieren Sie ein Objekt C im Status, der das speichert Stil der Schaltfläche „Ändern“.

2.2 Bedienung: Sei A = Bildhöhe, B = Tastenhöhe ändern. Nachdem das Bild geladen wurde, erhalten Sie A und legen marginTop erneut in C fest. (Diese Idee muss nur die Daten ändern und muss nicht die Ansichtsebene berücksichtigen)

Vollständiger Code

Konstrukt

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

deklariert das Laden der Betriebsfunktion

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'
        }
      })
    }
}

Pseudocode der Ansichtsebene

<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>

Im Prozess aufgetretene Probleme

1. Holen Sie sich die Bildhöhe:

1.1 Erfassungszeit: Es ist effektiv, die Höhe nach dem Laden des Bildes zu erhalten. Sie müssen daher das onLoad-Ereignis von img verwenden, um sicherzustellen, dass das Bild geladen wurde, wenn die Höhe des Bildes erreicht ist erhalten.

1.2 So erhalten Sie: Die Breite und Höhe des Bildes werden durch die Attribute height und width und nicht durch den Stil festgelegt, daher ist die Methode zum Abrufen der Höhe = document.getElementById('xxx').height

2 Die deklarierte Funktion ist nicht daran gebunden, daher kann setState nicht verwendet werden

Empfohlenes Lernen: „

Video-Tutorial reagieren
“

Das obige ist der detaillierte Inhalt vonSo legen Sie die Div-Höhe in React fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!