javascript - 如何获取 : Component Width After Render in React

Question

我正在尝试创建一个通用组件，我可以在其他应用程序中重复使用它。我需要知道渲染后组件的宽度，以便我可以修改组件的内容。

我一直在尝试在 React 中使用不同的生命周期，但没有成功。

componentDidUpdate() {
  console.log('width', this.element.offsetWidth);
}

render() {
  return (
    <div ref={(element) => {this.element = element }} />
  );
}

当我尝试这个时，我得到了屏幕的宽度，但是如果我改变了窗口的大小，我得到了组件的宽度。查看 Chrome 日志:

ComponentDidMount 在渲染之前执行，所以 this.element 是 undefined。

我也曾尝试使用 npm 中的不同库来解决这个问题，但没有成功。

更多信息:该组件必须在 Bootstrap 列内以不同的宽度工作。

render() {
  <Row>
    <Col sm={3} />
      <MyComponent />
    </Col>
    <Col sm={9} />
      <MyComponent />
    </Col>
  <Row>
}

澄清 我不想调整窗口大小，很抱歉我不清楚。我提到调整大小的唯一原因是，当创建 DOM 并调整大小时，我在 offsetWidth 中获得了正确的值。我正在寻找一种无需调整大小即可获得正确值的解决方案。后渲染函数调用、监听器、一些 react 魔法或其他解决方案。我的问题是我对虚拟 DOM 和真实 DOM 缺乏了解。

Answer 1

我无法用这里给出的答案解决这个问题。我只得到了浏览器窗口的宽度，而不是其中的组件。经过一些研究，看起来我在渲染方面遇到了先有鸡还是先有蛋的问题。经过更多研究，我发现 react-sizeme 可以解决问题。

import React, { Component } from 'react';
import sizeMe from 'react-sizeme';

class MyComponent extends Component {
  render() {
    const { width } = this.props.size;

    return (
      <div style={{
        width: '100%',
        backgroundColor: '#eee',
        textAlign: 'center'
      }}>
        <span>My width is: {Math.floor(width)}px</span>
      </div>
    );
  }
}

export default sizeMe()(MyComponent);

第一次渲染时会产生以下内容