如何在渲染之前获取React组件的大小(高度/宽度)?

我有一个react组件,需要 预先知道其尺寸

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

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

这些容器的尺寸以及页面上的其他许多容器都在CSS中定义。谁在React中定义组件的高度,宽度和位置?我已经习惯了CSS并能够访问它。但是在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 (

<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>

);

}

}

以上是 如何在渲染之前获取React组件的大小(高度/宽度)? 的全部内容, 来源链接: utcz.com/qa/418749.html

回到顶部