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

渲染前如何获取React组件的大小(高度宽度)?,第1张

渲染前如何获取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>    );  }}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5588145.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-14
下一篇 2022-12-15

发表评论

登录后才能评论

评论列表(0条)

保存