在 React 中强制 gif 重新加载

Question

我有一个包含 3 个步骤的模态组件。在第一步中，我有一个没有循环的 gif（换句话说，gif 不是无限的 gif）。当我打开模态并返回第一步时，我希望 gif 重新启动动画并仅循环一次。

我的问题是：当我第一次显示 gif 时，浏览器会下载 gif 并且 gif 工作正常，但之后浏览器从缓存中获取 gif 并且不会再次启动。所以当我关闭模态并再次打开或者我再次回到第一步时，就像我有一个图像而不是一个 gif。

限制：我不能多次下载 gif，所以我不能 ?a=${Math.random()强制 gif 再次循环。

我试过的：

1）img当我不在第一步并且没有打开模态时，我试图将 src 放在标签中。当我在第一步并打开模态时，我将 gif 放在img标签的 src 中

2）我尝试做与 1 次尝试相同的事情，但使用另一个 gif

3）我尝试在模态组件中执行与尝试 1 和 2 相同的操作，并将 src 传递给步骤子组件

4）img当我不在第一步并且没有打开模态时，我试图从DOM中删除标签

我的简化组件：

export class Modal extends React.PureComponent {
  state = { step: FIRST_STEP }

  render() {
    {currentStep === FIRST_STEP && this.renderFirstStep()}
    {currentStep === SECOND_STEP && this.renderSecondStep()}
  }

  renderFirstStep() {
    return <FirstStep />
  }
}

export class FirstStep extends React.Component {
  render() {
    return (
      <img src={gif} alt='gif' />
    )
  }
}

提前致谢

Answer 1

您可以通过清除图像 src 然后重新设置它来重新启动非无限 gif。

在 reactJS 中这样做的方法是使用组件状态和零长度超时来推送到下一个滴答声

class ReloadableGif extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      gif: 'http://insightgraphicdesign.net/wp-content/uploads/2014/07/coke-responsive-logo.gif',
      loaded: 'http://insightgraphicdesign.net/wp-content/uploads/2014/07/coke-responsive-logo.gif'
    }
  }
  
  reloadGif = () => {
    this.setState({loaded: ''})
    setTimeout(() => {
      this.setState({loaded: this.state.gif})
    }, 0)
  }
  
  render(){
    return <div>
      <img src={this.state.loaded} />
      <button onClick={this.reloadGif}>Replay Animation</button>
    </div>
  }
}

ReactDOM.render(
  <ReloadableGif />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<main id="react">
http://insightgraphicdesign.net/wp-content/uploads/2014/07/coke-responsive-logo.gif
</main>