반응 js에 재사용 가능한 타이머 만들기

Question

카운트 다운 타이머가 있으며 몇 군데에서 사용합니다.

코드

은 같은 것입니다 : "Tue November 29 2016 23:59:59 GMT+0200" : list.expires 같은 것을입니다

constructor(props){ 
    super(props); 

    this.state = { 
     remainingTime: null 
    }; 

} 

componentWillMount(){ 
    const list = this.props.list; 
    const t = Date.parse(list.expires) - Date.parse(new Date()); 
    if(t > 0){ 
     this.setState({remainingTime: t}); 
    }else{ 
     this.setState({remainingTime: 0}); 
    } 

} 

componentDidMount(){ 
    this.interval = setInterval(this.tick.bind(this), 1000); 
} 

componentWillUnmount(){ 
    clearInterval(this.interval); 
} 

tick(){ 
    if(this.state.remainingTime > 0) { 
     this.setState({remainingTime: this.state.remainingTime - 1000}); 
     if (this.state.remainingTime <= 0) { 
      clearInterval(this.interval); 
     } 
    }else{ 
     this.setState({remainingTime: 0}); 
    } 
} 

.

내가 말했듯이, 나는이 구성 요소를 약간의 구성 요소와 모든 구성 요소에 사용한다.

어떻게하면이 코드를 다른 위치에 배치하고 다른 모든 구성 요소에서이 코드를 다시 사용할 수 있습니까?

Answer 1

나는 "당신은

를 사용하여 구성 요소를 수출하고 당신이 필요로하는 곳에 가져 .TO 구성 요소

"수출 기본 ClassNameHere "

의 하단이이 곳을 할 싶어 생각 (워드 프로세서 링크) './path/ClassNameHere' "

큰 편집에서 수입 별칭 :

https://facebook.github.io/react/docs/reusable-components.html