Question

假设我有一些未指定数量的图片使用Andrew Farmer's example image component来检测每个图片的加载时间：

import React from 'react';

class ImageWithStatusText extends React.Component {
  constructor(props) {
    super(props);
    this.state = { imageStatus: null };
  }

  handleImageLoaded() {
    this.setState({ imageStatus: 'loaded' });
  }

  handleImageErrored() {
    this.setState({ imageStatus: 'failed to load' });
  }

  render() {
    return (
      <div>
        <img
          src={this.props.imageUrl}
          onLoad={this.handleImageLoaded.bind(this)}
          onError={this.handleImageErrored.bind(this)}
          />
        {this.state.imageStatus}
      </div>
    );
  }
}
export default ImageWithStatusText;

使用像Flux或Redux这样的框架，同步所有图像组件以检测所有图像何时加载完成的最简单方法是什么？

Answer 1

在redux中使用计数器可能是有意义的。对于每张图片，您可以发送操作以增加o[3] = 23;中的imagesOnPage计数器，然后在componentDidMount中发送一个增加loadedImagesOnPage的操作。对于handleImageMounted，您可以递减handleImageErrored。 imagesOnPage时，所有图片都已加载。

更健壮的方法是为每个图像生成唯一ID，并且有一个imagesOnPage === loadedImagesOnPage缩减器，每个键都是唯一ID，值是其状态： images 您可以编写一些实用程序来查看该reducer并查看是否所有图像都处于{ image_1234: 'loading', image_111: 'loaded', image_12: 'error' }状态。

使用React同步多个图像的onLoad

1 个答案: