Reactでdivの高さを設定する方法

react で div の高さを設定する方法: 1. CSS を通じて div の高さを実装します; 2. オブジェクト C を状態で宣言し、変更ボタンのスタイルをオブジェクトに保存し、A を取得して C をリセットします。その中の「marginTop」。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応で div の高さを設定するにはどうすればよいですか?

react は要素の高さを動的に設定します

react を使用してスタイルの動的変更を実装します (この方法は、次の場合以外には推奨されません)その他のオプションはありません)

以下に示すように:

要件

実装内の置換ボタン画像の右下では、画像の高さが変わると変更ボタンの位置も変わります。

アイデア

1. cssで実装(現時点では解決策なし)

2. React data-driven viewの特性を利用する

2.1 データ: 1つ宣言する状態オブジェクト 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 によって設定されるため、高さを取得するメソッドは =document.getElementById('xxx').height
です。 2. 宣言された関数にはバインディングがないため、setState を使用できなくなります。

推奨学習: "

react ビデオ チュートリアル

"

以上がReactでdivの高さを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。