react页面渲染之前_如何在渲染之前获取React组件的大小（高度/宽度）？

小编典典

如前所述，在将元素呈现为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 (

width: {dimensions.width}

height: {dimensions.height}

);

}

render() {

const { dimensions } = this.state;

return (

(this.container = el)}>

{dimensions && this.renderContent()}

);

}

}

2020-07-22