Создание React‑компонента часов с автоподновлением

<p>Требуется адаптировать приведённый ниже код так, чтобы отображаемое время обновлялось каждую секунду.</p> <pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>

<span class="hljs-keyword">class</span> <span class="hljs-title class_">Clock</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">React.Component</span><any, any> { <span class="hljs-title function_">constructor</span>(<span class="hljs-params">props</span>) { <span class="hljs-variable language_">super</span>(props) <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span> = { <span class="hljs-attr">date</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>() } }

<span class="hljs-title function_">componentDidMount</span>(<span class="hljs-params"></span>) { <span class="hljs-built_in">setInterval</span>( <span class="hljs-function">() =></span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">tick</span>(), <span class="hljs-number">1000</span> ) }

<span class="hljs-title function_">componentWillUnmount</span>(<span class="hljs-params"></span>) { <span class="hljs-built_in">clearInterval</span>() }

<span class="hljs-title function_">tick</span>(<span class="hljs-params"></span>) { <span class="hljs-comment">// @ts-ignore</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>.<span class="hljs-property">date</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>() }

<span class="hljs-title function_">render</span>(<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> ( <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Привет, мир!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Сейчас {this.state.date.toLocaleTimeString()}.<span class="hljs-tag"></<span class="hljs-name">h2</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span> ) } }

</code></pre>