如何获取：React中渲染后的组件宽度

Question

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

我一直在尝试使用不同的生命周期来做出反应而没有成功。

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。我正在寻找一种无需调整大小即可获得正确值的解决方案。后期渲染函数调用，侦听器，一些不可思议的魔术或其他解决方案。我的问题是我对虚拟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);

首次渲染时将产生以下内容