Comment définir la hauteur du div en réaction

Comment définir la hauteur div dans React : 1. Implémentez la hauteur div via CSS ; 2. Déclarez un objet C dans l'état et stockez le style du bouton de modification dans l'objet, puis récupérez A et réinitialisez le "marginTop " en C " C'est tout.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment régler la hauteur du div en réaction ?

react définit dynamiquement la hauteur de l'élément

Utilisez React pour implémenter modifiez dynamiquement le style (cette méthode n'est pas recommandée sauf s'il n'y a pas d'autre choix)

Comme le montre la figure ci-dessous :

Exigences

Le bouton de remplacement dans l'image est immédiatement situé en bas à droite de l'image. Lorsque la hauteur de l'image change, la position du bouton de remplacement change également.

Idée

1. Implémenter via CSS (il n'y a pas encore de solution pour le changement de plan)
2 Utiliser les caractéristiques de la vue basée sur les données de réaction
2.1 Données : déclarer un objet C dans l'état, qui stocke le style du bouton de modification.
2.2 Fonctionnement : Soit A = hauteur de l'image, B = changer la hauteur du bouton. Une fois l’image chargée, obtenez A et définissez à nouveau marginTop dans C. (Cette idée nécessite uniquement de modifier les données et n'a pas besoin de prendre en compte la couche de vue)

Le code complet

construct

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

déclare la fonction d'opération chargement

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 de la couche de vue

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

Problèmes rencontrés dans le processus

1. Obtenez la hauteur de l'image :
1.1 Temps d'acquisition : il est efficace d'obtenir la hauteur après le chargement de l'image, vous devez donc utiliser l'événement onLoad de img pour vous assurer que l'image a été chargée lorsque la hauteur de l'image est atteinte. est obtenu.
1.2 Comment obtenir : La largeur et la hauteur de l'image sont définies via les attributs height et width, pas via le style, donc la méthode pour obtenir la hauteur = document.getElementById('xxx').height
2. n'est pas lié à cela, par conséquent, setState ne peut pas être utilisé

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!