Question

我有一个React组件，还有一个JSON，它由图像URL组成，我通过映射功能将图像URL传递到组件中的image标签中。

这是我的代码示例：

import imgDetails from "../data/ImageDetails";

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imgContentLoad: false
    }
  }

  imageHandleLoad() {
    this.setState({
      imgContentLoad: true
    })
  }

  render() {
      return ({
            imgDetails.map((imgDetails) => {
                return ( <
                  React.Fragment > {
                    (this.state.imgContentLoad &&
                      <
                      img src = {
                        imgDetails.imgURL
                      }
                      onLoad = {
                        this.imageHandleLoad.bind(this)
                      }
                      />) || <
                      div > image is loading < /div>
                    } <
                    /React.Fragment>
                  )
                }
              )
            }

在这里我要显示“图像正在加载”文本，直到图像加载为止，因此我编写了上面的图像加载功能代码。但是我的问题是，“图像正在加载”正在无限显示图像。怎么了？

Answer 1

将其提取到一个新组件，该组件将侦听onload事件并在加载img时返回

class ImageWithLoading extends React.Component {
  state = { isLoaded: false }

  componentDidMount() {
    const image = new Image();
    image.onload = () => this.setState({ isLoaded: true });
    image.src = this.props.src;
  }

  render() {
    const { src } = this.props;
    const { isLoaded } = this.state;

    return isLoaded
      ? <img src={src} />
      : <div>Loading image...</div>
  }
}

然后将Example组件变成一个将数据映射到ImageWithLoading组件的容器

const Example = () => imgDetails
  .map(({ imgURL }) => <ImageWithLoading key={imgURL} src={imgURL} />);

显示一个伪文本，直到图像加载入反应

1 个答案: