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

小编典典

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

css

我有一个React组件，需要 在渲染之前 预先知道其尺寸。

当我在jquery中制作一个小部件时，我可以$('#container').width()在构建组件时提前获取容器的宽度。

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

这些容器的尺寸以及页面上的许多其他容器均在CSS中定义。谁在React中定义组件的高度，宽度和位置？我已经习惯了CSS做到这一点并且能够访问它。但是在React中，似乎我只能在组件渲染后访问该信息。

阅读 1890

2020-05-16

共1个答案

小编典典

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

请注意，使用setStatein 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>
    );
  }
}

2020-05-16