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>}

Answer 2

img src具有在这种情况下需要的onLoad事件。试试这个：

import React, { Component } from 'react'

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

class Biografy extends Component {

    state = {
      photo: "",
      loading: false
    }


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

  render() {
 const style = this.state.loading ? {} : {visibility: 'hidden'}
 const {loading} = this.state;
    return (
      <div>
        {!loading && <i className="fa fa-spinner"></i>}
       <img src={this.state.photo && `/images/${this.state.photo}`} alt="" 
         onLoad={() => this.setState({loading: true})}
         style={style}/>
      </div>
    )
  }
}


export default Biografy

Answer 3

尝试一下：

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

这意味着如果有照片，则显示图像。如果没有，请显示加载程序。

Answer 4

用悬念标签将其包裹起来，

这正是悬念的目的

根据我阅读的教程：

使用SVG和JS方式，JS可以解析我们的HTML并添加SVG，这可能会在React有时间安装其组件之前触发。因此，一旦React安装了组件，我们就必须找到一种解析HTML的方法。

您将需要安装fontawesome的'react-fontawesome'库和'free-solid-svg-icons'库

npm i --save @fortawesome/react-fontawesome
npm i --save @fortawesome/free-solid-svg-icons

然后您可以插入以下代码


import React, { Component, Suspense } from 'react'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';

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 (
      <Suspense fallback={<FontAwesomeIcon icon={faSpinner} size="2x" spin />}>
        <div>
          <img src={this.state.photo && `/images/${this.state.photo}`} alt="" />
        </div>
      </Suspense>
    )
  }
}


export default Biografy

执行此操作后，您可以从html中删除库导入，并有选择地选择所需的图标

有关更多信息，请参见以下文档/教程：

https://scotch.io/tutorials/using-font-awesome-5-with-react

https://github.com/FortAwesome/react-fontawesome

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

4 个答案: