javascript - 如何使用 Typescript 在 React 中设置间隔

Question

我正在尝试在 react/typescript 中呈现动态进度条。我能够在 react 中做到这一点，但将其转换为 typescript 给了我；

[ts] Property 'setInterval' does not exist on type 'Jockey'. any

componentDidMount 中的 setInterval 调用带有警告下划线。

只有 React 我在 componentDidMount 中使用了 this.interval = setInterval(this.timer, this.state.interval); 并且它起作用了但是我使用了 typescript 的严格类型我不确定该怎么做。

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

Answer 1

this.setInterval() 不存在。

我假设您正在尝试创建一个 interval 并保存一个 reference 以便您稍后可以清除它。

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

设置间隔

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

清除间隔

componentWillUnmount() {
  clearInterval(this.interval)
}

进一步阅读

参见 React Docs: State and Lifecycle 中的 setInterval() 引用了解更多信息。

祝一切顺利✌️