我有这个组件,其中呈现来自 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
最佳答案
因为看起来您正在使用 this.state.photo
的状态来确定它是否正在加载,您可以在呈现 i
之前简单地添加该条件> 标签:
{!this.state.photo && <i className="fa fa-spinner"></i>}
关于javascript - ReactJS - 在加载图像之前显示预加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56582328/