[解決済み] リアクトコンポーネントのサイズ（height/width）をレンダリング前に取得する方法は？

質問

リアクトのコンポーネントで、事前に寸法を知る必要があります。 それ自身をレンダリングする前に。

jqueryでウィジェットを作成する場合、単に $('#container').width() で、コンポーネントを構築する際にコンテナの幅を事前に取得することができます。

<div id='container'></div>

これらのコンテナの寸法は、ページ上の他のコンテナの束と一緒にCSSで定義されています。Reactのコンポーネントの高さ、幅、配置は誰が定義するのですか？私はCSSがそれを行い、それにアクセスできることに慣れています。しかし、Reactでは、コンポーネントがレンダリングされた後にのみ、その情報にアクセスできるようです。

どのように解決するのですか？

すでに述べたように、どの要素もDOMにレンダリングされるまでは寸法を取得することができません。Reactでできることは、コンテナ要素だけをレンダリングし、そのサイズを componentDidMount でサイズを取得し、その後残りのコンテンツをレンダリングすることです。

を作ったので の動作例 .

を使用することに注意してください。 setState で componentDidMount はアンチパターンですが、この場合、まさに私たちが達成しようとしていることなので、問題ありません。

乾杯!

コードです。

import React, { Component } from 'react';

export default class Example extends Component {
  state = {
    dimensions: null,
  };

  componentDidMount() {
    this.setState({
      dimensions: {
        width: this.container.offsetWidth,
        height: this.container.offsetHeight,
      },
    });
  }

  renderContent() {
    const { dimensions } = this.state;

    return (
      <div>
        width: {dimensions.width}
        <br />
        height: {dimensions.height}
      </div>
    );
  }

  render() {
    const { dimensions } = this.state;

    return (
      <div className="Hello" ref={el => (this.container = el)}>
        {dimensions && this.renderContent()}
      </div>
    );
  }
}