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

在react js中创建一个可重用的计时器

1 个答案: