如何使用Typescript在React中设置SetInterval

时间:2018-02-22 07:51:26

标签: javascript reactjs typescript

我正在尝试在react / typescript中呈现动态进度条。我能够做出反应,但将其转换成打字稿给了我;

  

[ts]'Jockey'类型中不存在属性'setInterval'。   任何

setInterval内的componentDidMount来电显示警告下划线。

只有反应我在this.interval = setInterval(this.timer, this.state.interval);内使用了componentDidMount并且它有效,但是对于打字稿的严格打字,我不知道该怎么做。

Jockey.tsx

import * as React from 'react';

interface Props {
    color: string;
    avatar: string;
}

interface State {
    interval: number;
    progress: number;
}

export class Jockey extends React.Component<Props, State> {

    constructor(props: Props) {
        super(props);
        this.state = {
          interval: Math.floor(Math.random() * 500),
          progress: 0,
        };
    }

    componentDidMount () {
        this.setInterval(this.timer, this.state.interval);
    }

    timer () {
        this.setState({ progress: this.state.progress + 1 });
        console.log('anyhting');
        
        (this.state.progress >= 99) ? this.setState({ progress: 100 }) : this.setState({ progress: 0 }) ;
    }

    render() {
        return (
            <div>
                <div className="App-lane">
                    {/* <img src={ this.props.avatar } alt=""/> */}
                    <progress value={this.state.progress} color={this.props.color} max="100" />
                </div>
            </div>
        );
    }
}

1 个答案:

答案 0 :(得分:2)

DECLARE @VAR CHAR(50) = 'SAMPLE' SELECT * FROM [DB] WHERE (acct LIKE '88%' AND @VAR = 'SAMPLE') OR (acct NOT LIKE '88%' AND @VAR = 'SAMPLE2') 不存在。

我假设您尝试创建this.setInterval()并保存interval,以便以后reference

请参阅下文,了解如何实现这一目标的粗略示例。

设置间隔

clear

清除间隔

componentDidMount () {
  this.interval = setInterval(this.timer, this.state.interval)
}

进一步阅读

有关详细信息,请参阅React Docs: State and Lifecycle中的componentWillUnmount() { clearInterval(this.interval) } 个引用。

一切顺利✌️