Renders a ticker component.
- Use the
React.useState()
hook to initialize theticker
state variable to0
. - Define two methods,
tick
andreset
, that will periodically incrementtimer
based oninterval
and resetinterval
respectively. - Return a
<div>
with two<button>
elements, each of which callstick
andreset
respectively.
代码实现
function Ticker(props) {
const [ticker, setTicker] = React.useState(0);
let interval = null;
const tick = () => {
reset();
interval = setInterval(() => {
if (ticker < props.times) setTicker(ticker + 1);
else clearInterval(interval);
}, props.interval);
};
const reset = () => {
setTicker(0);
clearInterval(interval);
};
return (
<div>
<span style={{ fontSize: 100 }}>{ticker}</span>
<button onClick={tick}>Tick!</button>
<button onClick={reset}>Reset</button>
</div>
);
}
使用样例
ReactDOM.render(<Ticker times={5} interval={1000} />, document.getElementById('root'));