創建一個可反覆使用的定時器js

Question

我有一個倒數計時器，我在幾個地方使用它。

的代碼是一樣的東西：

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}); 
    } 
} 

哪裏list.expires是一樣的東西："Tue November 29 2016 23:59:59 GMT+0200"。

就像我說的，我使用這個計時器在幾個組件和每個組件中，我有這個相同的代碼。

我該如何把這個代碼放在別的地方，然後在其他所有組件中重用呢？

Answer 1

我想你想導出組件並在你需要做的這個地方這個在組件

「出口默認ClassNameHere」

的底部。要導入它，使用

「從 './path/ClassNameHere'」

大編輯導入別名（鏈接文檔）：

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