非常に単純なclock in react js

-1

reactでsetInterval関数を使用して、反復で関数を繰り返しレンダリングする方法。非常に簡単な例を提供してください。私はノードjsのローカル環境を使用しています。ここで私はsimple clock given in react documentationを試しています（ただし、私のファイル構造は異なります）。 did notは分かった。マウントなど。ちょうど始まる。以下は非常に単純なclock in react js

私App.jsx

import React,{ Component } from 'react'; 
class App extends Component { 

good(){ 
    {new Date().toLocaleTimeString()} 
} 
    render() { 
     return (
     <p>{setInterval(()=>this.good(),500)}</p> 
    ); 
    } 
} 
export default App;

main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App.jsx'; 


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

index.htmlを

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset = "UTF-8"> 
     <title>React App</title> 
    </head> 
    <body> 
     <div id="app"></div> 
     <script src="index.js"></script> 
    </body> 
</html>

マイフォルダ構造体でありますあなたが使用することを選択しているために基本的な部分は最初の場所で反応しているこれらのように、コンポーネント、状態や小道具を反応させるのUREは、私は詳細を読むためにあなたを示唆して

folder structure

出典

2017-08-29 Sambit Kumar Sahu

私はあなたがより多くを読むことをお勧めあなたがReactを最初に使用することを選択した基本的な部分であるので、Reactコンポーネント、状態、および小道具について。 – meta4

を下回るようなものです。基本的な手順は次のとおりです。

コンポーネントの状態としての時間を保存します。
スタートカチカチ機能は、すぐにあなたのコンポーネント負荷として（つまりはcomponentDidMountが何をするかである - ページ内のコンポーネントをロードするとき、それがトリガーです）各チック使用に
SETSTATEは、時間の値を変更するには（SETSTATEはレンダリングトリガー）

次の手順を実行する場合は、Reactサイトからの例と同様の結果を達成するに、これはそれが本当に行われるべき方法です（あなたが本当にそれをやりたい場合は、デザインをREACT）

出典

2017-08-29 11:21:57 meta4

ありがとうございました。 –

非常に単純なclock in react js

答えて

関連する問題