我需要使用React获取图像的尺寸。我找到了一个名为react-
measure的库，用于计算React组件的度量。它可以工作，但是在图像加载后无法启动。我需要在图像加载时启动它，以便获得准确的尺寸，而不是0 x
157或类似的值。

我尝试使用onLoadImage
Event来检测何时加载了图像，但是没有得到令人满意的结果。本质上，我要做的是在加载图像（handleImageLoaded()已调用）后，将hasLoadedstate属性更改为true。我知道一个事实hasLoaded已更改为，true因为它说的是：Image Loaded: true。

我注意到的是，我只能计算已缓存图像的尺寸…

这是一个演示视频 ：cl.ly/250M2g3X1k21

是否有更好，更简洁的方法来使用React正确地获取尺寸？

这是代码：

import React, {Component} from 'react';
import Measure from '../src/react-measure';
class AtomicImage extends Component {

    constructor() {
        super();
        this.state = {
            hasLoaded: false,
            dimensions: {}
        };
        this.onMeasure = this.onMeasure.bind(this);
        this.handleImageLoaded = this.handleImageLoaded.bind(this);
    }

    onMeasure(dimensions) {
        this.setState({dimensions});
    }

    handleImageLoaded() {
        this.setState({hasLoaded: true});
    }

    render() {

        const {src} = this.props;
        const {hasLoaded, dimensions} = this.state;
        const {width, height} = dimensions;

        return(
            <div>
                <p>Dimensions: {width} x {height}</p>
                <p>Image Loaded: {hasLoaded ? 'true' : 'false'}</p>
                <Measure onMeasure={this.onMeasure} shouldMeasure={hasLoaded === true}>
                    <div style={{display: 'inline-block'}}>
                        <img src={src} onLoad={this.handleImageLoaded}/>
                    </div>
                </Measure>
            </div>
        );
    }
}

export default AtomicImage;

这是父代码。这不是很重要-只需传递src给AtomicImage元素：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import AtomicImage from './AtomicImage';

class App extends Component {

  constructor() {
    super();
    this.state = {src: ''}
    this.handleOnChange = this.handleOnChange.bind(this);
  }

  handleOnChange(e) {
    this.setState({src: e.target.value});
  }

  render() {

    const {src} = this.state;
    return (
      <div>
        <div>
          <input onChange={this.handleOnChange} type="text"/>
        </div>
        <AtomicImage src={src} />
      </div>
    )
  }

}

ReactDOM.render(<App />, document.getElementById('app'));