反応タイマー

Question

私はちょうど反応を最近学習し始めました。私は目盛りタイマーを画面に表示し、時間は1秒ごとに更新されます。

ページが最初に読み込まれたときに時刻が表示されますが、静的です。コンソールにエラーはありません。私のコードで何をすべきですか？ここで

は、私のコードの一部です：

function timer(){ 
return new Date().toLocaleTimeString() 
} 
setInterval(timer, 1000); 

const element = (
    <div> 
    {getGreeting(user)} 
    <h1>It is {timer()}.</h1> 
    </div> 
); 

ReactDOM.render(
    element, 
    document.getElementById('container') 
); 

そして、ここでは、結果のスクリーンショットです： enter image description here

感謝!!

Answer 1

現在の表示時間は、コンポーネントの状態です。 setIntervalを使用して、状態を更新して再レンダリングを開始します。

さらに、setTimeoutを使用して、次の秒から現在の時刻を引いた時間を設定します。あなたは私はあなたがJavaScriptに新しく追加されたと信じて

function timer(){ 
    return new Date().toLocaleTimeString() 
} 
setInterval(timer, 1000); 

をやっているのか見ることでhttps://jsfiddle.net/DerekL/3yLneqy7/

class Time extends React.Component { 
 
    constructor(props){ 
 
     super(props); 
 
     this.timer = 0; 
 
     this.state = { 
 
      time: new Date() 
 
     }; 
 
    } 
 
    componentWillMount(){ 
 
     // set up timer 
 
     this.timer = setTimeout(() => { 
 
      this.setState({ 
 
       time: new Date() 
 
      }); 
 
      this.componentWillMount(); 
 
     }, Math.floor(Date.now()/1000) * 1000 + 1000 - Date.now()); 
 
    } 
 
    componentWillUnmount(){ 
 
     // remove timer 
 
     clearTimeout(this.timer); 
 
    } 
 
    
 
    render() { 
 
     // render the current time 
 
     return this.state.time.toLocaleTimeString(); 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    render() { 
 
     return (
 
      <span> 
 
       <span>The time is </span> 
 
       <Time/>. 
 
      </span> 
 
     ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.body);

<script src="https://unpkg.com/react/umd/react.development.js"></script> 
 
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

：

は、ここでの例です。私はあなたが基本に自信を持つまで、ライブラリやフレームワーク（バニラJavascriptで）を使わずにコードを作成することをお勧めします。