React：コンポーネントのforceUpdate/renderをトリガする方法（クラスではない）？

Question

official docsに記載されている例と非常によく似ています。

//Clock.jsx 
function Clock(props) { 

    setInterval(()=>{ 
    // ??? how to trigger forceUpdate/render here??? 
    }, 1000); 


    return (
    <div> 
     <h2>It is {new Date().toLocaleTimeString()}.</h2> 
    </div> 
); 
} 
export default Clock; 

そしてのは、このファイルをインポート一部の親コンポーネントとしましょう：我々は機能（ないクラス）として提示されたクロック成分を、持っているとしましょう

//index.jsx 
import Clock from 'Clock' 

.. 
render(){ return (
    <div> 
    <Clock /> 
    </div>); 
} 
.. 

を行うにはどのような方法がありますそれは時計をクラスにすることなくそれですか？

Answer 1

setIntervalを親クラスに移動し、ClockコンポーネントがClockの小道具としてレンダリングする値を渡すことができます。

setIntervalを親クラス内のcomponentDidMountに設定し、コールバックをgetCurrentTimeという関数（return new Date().toLocaleTimeString()）に設定します。それは時計の小道具を更新するレンダリングをトリガーします。

これにより、スマートコンポーネントによって渡された情報のみが表示されるため、Clockコンポーネントは適切にダムコンポーネントになります。