React JS Условный рендеринг анимационного лотерейного компонента при загрузке - PullRequest
Новая
       66

React JS Условный рендеринг анимационного лотерейного компонента при загрузке

0 голосов
/ 26 октября 2019

Я пытаюсь выяснить, как условно визуализировать загрузочную анимацию при загрузке изображения с помощью библиотеки анимации лотереи AirBnB: https://lottiefiles.com/

Я использовал различные анимации в проекте без условного рендеринга.

Мой оригинальный код работает со стандартным оператором or, использующим URL-изображение-заполнитель: 

  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%, анимация будет отображаться в виде. Любые идеи о том, как этого добиться, были бы полезны.

1 Ответ

0 голосов
/ 26 октября 2019

Я нашел более простой способ сделать это. Вместо использования файла JSON у Lotties также есть опция экспорта в gif. 

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

Импортируйте gif в компонент, а затем используйте его после оператора or, чтобы отобразить его во время загрузки изображения.

...