Sehr einfache Uhr in Reaktion js

-1

Wie setInterval-Funktion zu reagieren, um wiederholt eine Funktion in reagieren. Bitte geben Sie ein sehr einfaches Beispiel an. Ich verwende Node js lokale Umgebung. Hier versuche ich für eine simple clock given in react documentation (aber meine Dateistruktur ist anders). Ich weiß nicht über DidMount etc .. Gerade erst.Sehr einfache Uhr in Reaktion js

Unten ist mein 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>

Mein Ordner-Struktur ure ist wie unten

folder structure

Quelle

2017-08-29 Sambit Kumar Sahu

ich schlage vor, Sie mehr zu lesen über Reagieren von Komponenten, Zustand und Requisiten, da diese grundlegende Teile sind, für die Sie sich entschieden haben, React an erster Stelle zu verwenden. – meta4

ich Ihnen vorschlagen, mehr über Komponenten reagieren zu lesen, Zustand und Requisiten, da diese wesentliche Bestandteile sind, für die Sie in erster Linie Reagieren gewählt haben, zu verwenden. Grundlegende Schritte wären:

Zeit als Status Ihrer Komponente speichern.
beginnen tickt Funktionalität, sobald Ihre Komponente Lasten (das ist, was componentDidMount tut - es ausgelöst wird, wenn die Komponente Lasten Seite)
Auf jeder Zecke Verwendung setState Zeitwert zu ändern (setState löst render)

wenn Sie diese Schritte folgen würden Sie ähnliches Ergebnis zu Beispiel aus React Website erreichen, und das ist, wie es wirklich getan werden sollte (wenn Sie wirklich wollen, es Reagieren Design in)

Quelle

2017-08-29 11:21:57 meta4

Vielen Dank. –

Sehr einfache Uhr in Reaktion js

Antwort

Verwandte Themen