从父组件重新启动反应计时器

Question

我这里有一个小问题：

我有两个组件，一个是parent，一个timer，它是parent的子组件之一

则CCD_ 4将CCD_ 5和CCD_。计时器将每隔delay毫秒执行一次callback。

---

这是计时器的代码：

interface TimerProps {
delayInMilliseconds: number;
callback: Function;
}
const Timer = (props: TimerProps) => {
const { delayInMilliseconds, callback } = props;
const [ timerId, setTimerId ] = React.useState(0);
React.useEffect(() => {
createTimer();
}, []);
const createTimer = () => {
setTimerId(setInterval(callback, delayInMilliseconds))
};
const stopTimer = () => {
clearInterval(timerId);
};
const restartTimer = () => {
stopTimer();
createTimer();
};
return <button onClick={restartTimer}>stop timer</button>;
};

到目前为止，一切都很好。计时器执行id需要执行的操作，并且restartTimer函数起作用。

---

我现在要做的是将restartTimer函数绑定到parent组件上的一个按钮上。

我曾尝试将React.forwardRef与React.useImperativeHandle结合使用，但我并不完全清楚其背后的机制，到目前为止，我还没有遇到任何运气

有人能帮我理解如何"；"曝光"；子元素的CCD_ 14函数到父元素？

Answer 1

我最终只是将功能组件作为类组件，并使用useRef从父元素访问它

子级：

interface TimerProps {
delayInMilliseconds: number;
callback: Function;
}
interface TimerState {
timerId: number;
}
class Timer extends React.Component<TimerProps, TimerState> {
constructor(props: TimerProps) {
super(props);
this.state = {
timerId: 0,
};
}
componentDidMount() {
this.createTimer();
}
createTimer = () => {
this.setState({
...this.state,
timerId: setInterval(this.props.callback, this.props.delayInMilliseconds),
});
};
stopTimer = () => {
clearInterval(this.state.timerId);
};
restartTimer = () => {
this.stopTimer();
this.createTimer();
};
render() {
return null;
}
}
export default Timer;

父级：

const handleRefreshButtonClick = () => {
if (timerRef) {
timerRef?.current?.restartTimer();
}
}
...
const timerRef = React.useRef();
return(
<Timer
ref={timerRef}
delayInMilliseconds={refreshDelay //5000}
callback={doOtherStuff}/>
)
...
<Button onClick={handleRefreshButtonClick} /> 

Answer 2

在父组件中创建状态和函数，并将其传递给子组件，即定时器组件，然后从父组件处理它。