渲染前如何获取React组件的大小（高度宽度）？

渲染前如何获取React组件的大小（高度/宽度）？

如前所述，在将元素呈现为DOM之前，您无法获得任何元素的尺寸。在React中，您可以做的只是渲染一个容器元素，然后在中获取其大小

componentDidMount

，然后渲染其余内容。

请注意，使用

setState

in

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