반응 타이머가

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을 사용하고 다음 초에서 현재 시간을 뺀 기간을 설정하십시오. 당신은 내가 당신이 자바 스크립트를 처음 생각

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>

:

다음은 예입니다. 기본을 확신 할 때까지는 라이브러리 나 프레임 워크 (바닐라 자바 ​​스크립트)를 사용하지 않고 코딩하는 것이 좋습니다.