React JS 在上传时有条件地渲染动画 lottie 组件

Question

我正在尝试弄清楚如何使用 AirBnB 的 lottie 动画库在图片上传时有条件地渲染加载动画：https://lottiefiles.com/

我在整个项目中使用了各种没有条件渲染的动画。

我的原始代码使用占位符 URL 图像与标准 or 运算符一起工作：

  render() {

    if (this.state.progress === 0) {
      return (
        <>
          <div>
            <progress value={this.state.progress} max="100" />
            <input type="file" onChange={this.handleChange} />
            <button onClick={this.handleUpload}>Upload</button>
          </div>
        </>
      )
    } else {
      return (
        <>
          <img src=this.state.url || 'http://via.placeholder.com/400x300' />
        </>
      )
    }
  }
}

既然成功了，我想添加一个动画加载屏幕，但到目前为止还没有成功：

import LottieUpload from './animation/LottieUpload'
...
//same code as above
    } else {
      return (
        <>
          {(this.state.progress < 100) ?
            <LottieUpload />
            : <img className="responsive" src={this.state.url} alt="Uploaded images" />
          }
        </>
      )
    }

我的目标是如果图片加载没有达到100%，动画就会显示在视图中。关于如何实现此目的的任何想法都会有所帮助。

Answer 1

我找到了一种更简单的方法。除了使用 JSON 文件，Lotties 还有一个 gif 导出选项。

import loading from './animation/loading.gif
//omitted code
return (
        <>
          <img src={this.state.url || loading} alt="uploaded images" />
        </>
      )

将 gif 导入组件，然后在 or 运算符之后使用它在上传图片时显示。

React JS 在上传时有条件地渲染动画 lottie 组件

React JS Conditionally rendering animated lottie component on upload

reactjs

lottie