Autocounter(自动计数器)是一种常见的组件,在 React 中实现它的方法如下:
下面是 Autocounter 组件的示例代码:
import React, { Component } from 'react';
class Autocounter extends Component { constructor(props) { super(props); this.state = { count: 0 }; }
componentDidMount() { this.interval = setInterval(() => { this.setState({ count: this.state.count + 1 }); }, 1000); }
componentWillUnmount() { clearInterval(this.interval); }
render() { return (
export default Autocounter;
在上面的代码中,组件首先设置 count 的状态变量,并在 componentDidMount() 方法中启动定时器,调用 setState() 方法以自动增加 count 变量的值。组件也重写了 componentWillUnmount() 方法,用于在组件卸载前清理定时器。最后,在 render() 方法中,组件将 count 的当前值呈现在屏幕上。
在其他组件中,您可以像使用普通的 React 组件一样使用 Autocounter 组件。例如,您可以将它包含在另一个组件中,像这样:
import React, { Component } from 'react'; import Autocounter from './Autocounter';
class MyComponent extends Component { render() { return (
export default MyComponent;
在上面的代码中,MyComponent 组件包