GIF 파일을 다른 구성 요소가 반응에서 사용할 때 다시로드하지 못하도록합니다.

Question

두 가지 구성 요소가 있는데, 예를 들어 componentA과 componentB이라고합시다. 두 구성 요소 모두 .gif 파일을 가져 오는데, image.gif이라고 가정 해 보겠습니다. image.gif은 루프되지 않으므로 업데이트되지 않은 경우에만 재생해야합니다.

처음에는 componentA은 image.gif이지만, componentB은 렌더링하지 않습니다. 따라서 image.gif 안에 componentA 한 번 재생됩니다. componentB 안에 image.gif을 렌더링하면 componentA 안에 image.gif이 다시 재생됩니다. 이는 원하지 않습니다.

할 수 있습니까? 감사!

편집 : 재현에 대한 몇 가지 간단한 코드 : './image.gif'

로

export default class componentA extends React.PureComponent { 
    render() { 
     return (
      <div> 
       <img src={image} /> 
      </div> 
     ); 
    } 
} 

Component B 이미지 가져 오기 './image.gif'로

Component A 이미지 가져 오기

export default class componentA extends React.PureComponent { 
    render() { 
     return (
      <div> 
       {this.props.show ? <img src={image} /> : null} 
      </div> 
     ); 
    } 
} 

App

import componentA from './componentA.react' 
import componentB from './componentB.react' 

export default class App extends React.Component { 

    componentWillMount() { 
     this.setState({ 
      show: false, 
     }); 
    } 

    componentDidMount() { 
     // ...or some moment when the App thinks componentB should update 
     this.setTimeout(() => { 
      this.setState({ 
       show: true, 
      }); 
     }, 4000); 
    } 

    render() { 
     return (
      <componentA /> 
      <componentB show={this.state.show} /> 
     ); 
    } 
} 

Answer 1

좀 더 복잡하고 유연한 구조를 사용하는 것이 좋습니다. 정적 인 애니메이션 GIF를 사용하고 자바 스크립트로 바꾸십시오.

처럼 비슷한 경우에 제안했다 : this.setState으로

Stop a gif animation onload, on mouseover start the activation

JavaScript to control image animation?

Answer 2

는 this.render 방법을 실행하여이 개 구성 요소가 다시 렌더링된다.

당신이 시도 할 수있는 사항은 다음과 같습니다

구성 요소 A :

export default class componentA extends React.Component { 
    render() { 
     return (
      <div> 
       <img src={image} /> 
      </div> 
     ); 
    } 
} 

구성 요소 B :

export default class componentB extends React.Component { 
    constructor() { 
     super(props) 
     this.state = { show: false } 
    } 

    componentDidMount() { 
     this.setTimeout(() => { 
      this.setState({ 
       show: true, 
      }); 
     }, 4000); 
    } 

    render() { 
     return (
      <div> 
       {this.state.show ? <img src={image} /> : null} 
      </div> 
     ); 
    } 
} 

앱 :

import componentA from './componentA.react' 
import componentB from './componentB.react' 

export default class App extends React.Component { 
    render() { 
     // Carefull here, you have to return a single `node` in the render method 
     return (
      <div> 
       <componentA /> 
       <componentB /> 
      </div> 
     ); 
    } 
}