は私がreactjsを使用して、すべての秒間隔でHTMLに現在のタイミング値をレンダリングしたいreactjs

Question

内のすべての秒の間隔でHTMLに現在のタイミング値をレンダリングします。私は以下のコードを貼り付けた。コードを実行するとエラーが表示されます。あなたのrender()メソッド内setInterval()を置く

import react from "react"; 

**Defined class** 
export default class IndependentTimer extends react.Component { 
    constructor() { 
     super(); 
     this.state = { 
      value: "" 
     }; 

     this.customFunction = this.customFunction.bind(this); 
    } 

**This function is responsible for generating current time.** 
    customFunction() { 
     console.log("customFunDis display!"); 
     return (<h1> Time is : {new Date().toLocaleTimeString()} </h1>); 
    } 

**render function** 
    render() { 
     return (
      <div> 
       {**What to do here?**} 
      </div> 
     ); 
    } 
} 

** Error I Got is : ** 
I got that error at every interval of time. 

VM413:1 Uncaught SyntaxError: Unexpected identifier 
setInterval (async)  
render @ index.js:31245 

Answer 1

いくつかのこと」

まず：あなたはあなたのリアクトコンポーネントを作成するにタイプミスがあります。それはReact.Componentを拡張すべきであり、それは内部的にそれ以外の場合は失敗しますReact.createElementを使用していますので、あなたはimport React from 'react'として大文字とreactをインポートする必要があります。

は、第二に：のsetInterval関数ではなく返されたHTMLとして最初の引数を取ります。あなたは

setInterval(this.customFunction(),1000) 

を書くとき、あなたはcustomFunction 1秒ごとに実行され、それが間違っているHTMLを返します。またのsetIntervalタイマーのための固有のIDそう

<div> 
       { 
        setInterval(this.customFunction(),1000) 
       } 
      </div> 

文句を言わない仕事である整数を返します。あなたはcomponentDidMount機能でのsetIntervalを持って、あなたの変更が

class IndependentTimer extends React.Component { 
 
      constructor() { 
 
       super(); 
 
       this.state = { 
 
        time: "" 
 
       }; 
 

 
       this.customFunction = this.customFunction.bind(this); 
 
      } 
 

 
      componentDidMount() { 
 
       console.log("timer display!"); 
 
       this.timer = setInterval(this.customFunction,1000) 
 
      } 
 

 
      componentWillUnmount() { 
 
       clearInterval(this.timer); 
 
      } 
 
      //Custom function which calculates current time. 
 

 
customFunction() { 
 
     console.log("customFunDis display!"); 
 
     this.setState({time: new Date().toLocaleTimeString()}); 
 
    
 
} 
 

 
render() { 
 
      return (
 
       <div> 
 
       <h1> Time is : {this.state.time} </h1> 
 
       </div> 
 
      ); 
 
     } 
 

 
    } 
 
    
 
ReactDOM.render(<IndependentTimer/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

Answer 2

は、コンポーネントごとに更新時間をsetInterval()新しいブランドを作成します。

ベストプラクティスはそうのようなあなたのコンポーネントのcomponentDidMount()ライフサイクルメソッド内の1つのsetInterval()メソッドを作成することです：

componentWillUnmount() { 
    clearInterval(this.timer) 
} 

：あなたは、あなたのコンポーネントがマウント解除することを期待たび

componentDidMount() { 
    this.timer = setInterval(this.tick, 1000) 
} 

また、あなたのsetInterval()をクリアする必要がありますあなたは以下のコードに似た何かで終わるはずです。

// React. 
import React from 'react' 

// Independent Timer. 
export default class IndependentTimer extends React.Component { 

    // Constructor. 
    constructor(props) { 

    // Super Props. 
    super(props) 

    // State. 
    this.state = { 
     time: new Date() 
    } 
    } 

    // Render. 
    render() { 
    const time = this.state.time 
    return `${time * 1}` 
    } 

    // Did Mount. 
    componentDidMount() { 
    this.timer = setInterval(this.tick, 1000) 
    } 

    // Tick. 
    tick =() => { 
    console.log('Tick.') 
    return this.setState({time: new Date()}) 
    } 

    // Will Unmount. 
    componentWillUnmount() { 
    clearInterval(this.timer) 
    } 
} 

あなたはまた、公式からthis tutorialをチェックアウトする場合がありますが、クロックコンポーネントの作成に関するドキュメントを反応します。あなたが心に留めておく必要がある

Answer 3

import React, { Component } from 'react'; 
class App extends Component { 
    constructor() { 
    super(); 
    this.state = {time:new Date()}; 
    this.startTimer = this.startTimer.bind(this); 
    this.sTimer = this.sTimer.bind(this); 
    } 

    startTimer() { 
    setInterval(this.sTimer, 1000) 
    } 
    sTimer() { 
    this.setState({ 
    time:new Date() 
    }); 
    } 
    render() { 
    return(
    <div> 
     <button onClick={this.startTimer}>Start</button> 
     {this.state.time.toLocaleTimeString()} 
    </div> 
); 
} 

}export default App; 

使用して、このクラスを反映するように、あなたのコンポーネントが再レンダリングSETSTATEを使用した状態のタイマ値を格納する必要がありますそれはあなたを助けるかもしれません..