您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何在渲染之前获取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 (
      <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>
    );
  }
}
其他 2022/1/1 18:17:43 有406人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶