如何获取Image组件(包含模式)中显示内容的真实大小？

var img = document.getElementById('myImage');
var realWidth = img.naturalWidth;
var realHeight = img.naturalHeight;

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.imageRef = React.createRef();
  }

  componentDidMount() {
    const img = this.imageRef.current;
    const realWidth = img.naturalWidth;
    const realHeight = img.naturalHeight;
    console.log("Real width: " + realWidth);
    console.log("Real height: " + realHeight);
  }

  render() {
    return <img ref={this.imageRef} src="example.jpg" />;
  }
}

var img = document.getElementById('myImage');
var computedStyle = window.getComputedStyle(img);
var realWidth = parseFloat(computedStyle.width);
var realHeight = parseFloat(computedStyle.height);