Для отображения точного времени с секундами в React компоненте, вам потребуется использовать состояние и функции жизненного цикла компонента.
В React есть несколько способов реализовать это. Один из них - это использование функционального компонента с помощью хука useState и useEffect.
Вот пример функционального компонента, который отображает точное время со секундами:
import React, { useState, useEffect } from 'react';
const Clock = () => {
const [time, setTime] = useState(new Date());
useEffect(() => {
const timer = setInterval(() => setTime(new Date()), 1000);
return () => {
clearInterval(timer);
};
}, []);
return <div>{time.toLocaleTimeString()}</div>;
}
export default Clock;
В этом коде мы используем useState для хранения текущей даты и времени, а функция setTime используется для обновления этого значения.
Затем мы используем хук useEffect, чтобы установить интервал, который будет обновлять состояние времени каждую секунду. Функция setInterval возвращает идентификатор таймера, который мы сохраняем в переменную timer.
В функции useEffect мы также передаем пустой массив зависимостей, чтобы указать, что эффект должен выполняться только один раз при монтировании компонента и не должен зависеть от других значений. Мы также возвращаем функцию внутри useEffect, которая будет вызываться при размонтировании компонента и очищать таймер с помощью clearInterval.
В экранной части компонента мы выводим time.toLocaleTimeString(), который форматирует текущую дату и время в локализованную строку времени.
Теперь, при каждом рендеринге компонента, он будет отображать точное время со секундами и автоматически обновляться каждую секунду.