React？の幅に基づいて画像の高さを動的に設定するにはどうすればよいですか？

Question

イメージをレンダリングするためのReactコンポーネントがあります。単純化した形で、それは次のようになります。

function Image(props) { 
    return <img src="..." height={...} /> 
} 

私は動的に（画像タグの幅を含む）いくつかの計算に基づいて画像の高さを設定したかったです。 しかし、画像の高さを計算するには、まず画像がロードされるのを待ってから高さを計算する必要があります。 しかし、renderメソッドが呼び出されたとき、画像がまだロードされていないため、高さはnullです。

• コンポーネントがレンダリングされ、イメージが読み込まれるときの高さを設定する正しい方法は何ですか？

• 私が書いたように、画像の高さを計算するには、画像の幅を使用します。要素の幅に基づいて高さを計算するには、どのようにDOM要素（画像タグ）にアクセスできますか？あなたは何ができるか

Answer 1

イメージのため、具体的onLoadイベント、画像のイベントハンドラを使用している：一般的な形式は、ダイナミックとして、状態のいくつかの値を持っているだろう

<img onLoad={...} /> 

いくつかの初期値を持つので、のような高さ、：そして、

this.state = { 
    dynamicHeight: 0 
}; 

、画像の負荷に、これらの値を設定するには、イベントハンドラを作成します。

onLoad(image, imageElement) { 
    this.setState({ 
    dynamicHeight: //do something to imageElement's width to calculate height 
    }); 
} 

次に画像要素の値を使用します。それは読み込み完了だ後

<img onLoad={...} height={this.state.dynamicHeight} /> 

これは、新しいダイナミックな高さでコンポーネントを再描画します。