В вашем вопросе содержится описание задачи управления таймерами в React. Чтобы остановить таймер по его идентификатору (ID), вы можете использовать функцию `clearTimeout`, предоставляемую браузером, если вы используете `setTimeout` для создания таймеров. Ниже приведен пример кода, который демонстрирует, как это можно реализовать.
```typescript
import React, { useState, useEffect } from 'react';
interface Timer {
id: string; // уникальный идентификатор таймера
time: number; // время
}
const TimerComponent: React.FC = () => {
const [timers, setTimers] = useState<Timer[]>([]);
// Функция для добавления нового таймера
const addTimer = () => {
const id = Math.random().toString(36).substring(2);
const newTimer: Timer = { id, time: 10 }; // например, таймер на 10 секунд
setTimers(prev => [...prev, newTimer]);
};
// Функция для остановки таймера по ID
const stopTimer = (id: string) => {
setTimers(prev => prev.filter(timer => timer.id !== id));
// Здесь вы можете вызвать clearTimeout для конкретного таймера, если используете setTimeout
// Например, нужно хранить идентификаторы таймеров, чтобы их можно было остановить
};
// Пример эффекта, который может стартовать таймеры
useEffect(() => {
const timeouts: NodeJS.Timeout[] = timers.map(timer => {
return setTimeout(() => {
console.log(`Timer ${timer.id} finished`);
// Здесь можно удалить таймер, когда время истечет
setTimers(prev => prev.filter(t => t.id !== timer.id));
}, timer.time * 1000); // таймер сработает через 'time' секунд
});
// Очистка при размонтировании или изменении таймеров
return () => {
timeouts.forEach(clearTimeout);
};
}, [timers]);
return (
<div>
<button onClick={addTimer}>Добавить таймер</button>
<ul>
{timers.map(timer => (
<li key={timer.id}>
Таймер {timer.id}: {timer.time} секунд
<button onClick={() => stopTimer(timer.id)}>Остановить</button>
</li>
))}
</ul>
</div>
);
};
export default TimerComponent;
```
### Примечания
1. **ID таймера**: В этом примере мы создаем уникальный идентификатор для каждого таймера с помощью `Math.random()`. Вы можете использовать другие способы генерации ID, если это необходимо.
2. **clearTimeout**: В примере выше мы не используем `clearTimeout`, так как пример не сохраняет идентификаторы таймеров, созданных через `setTimeout`. Вам нужно сохранить эти идентификаторы в массиве, чтобы вызвать `clearTimeout` для каждого таймера, который нужно остановить.
3. **Эффект очистки**: В `useEffect` мы добавляем очистку таймеров, чтобы избежать утечек памяти, когда компонент размонтируется или когда таймеры изменяются.
4. **Использование состояния**: Если вы хотите также управлять оставшимся временем, вы можете дополнительно реализовать логику с использованием `setInterval` или аналогичного подхода для обновления состояния.
Эта реализация является базовым примером, и вы можете адаптировать ее в зависимости от конкретных требований вашего приложения.