javascript - ReactJS - 在加载图像之前显示预加载器

Question

我有这个组件，其中呈现来自 json 的数据。一切正常。但我想插入一个加载器:<i className="fa fa-spinner"></i>在加载图像之前。加载程序之后也应该消失。我该怎么做？

import React, { Component } from 'react'

var data = require('./db.json');

class Biografy extends Component {
  constructor(props) {
    super(props)
    this.state = {
      photo: ""
    }
  }

  componentDidMount() {
    this.setState({
      photo: data.biography[0].photo
    })
  }

  render() {
    return (
      <div>
        <i className="fa fa-spinner"></i>
        <img src={this.state.photo && `/images/${this.state.photo}`} alt="" />
      </div>
    )
  }
}


export default Biografy

Answer 1

因为看起来您正在使用 this.state.photo 的状态来确定它是否正在加载，您可以在呈现 i 之前简单地添加该条件> 标签:

{!this.state.photo && <i className="fa fa-spinner"></i>}