React JS，在組件內創建一個時鐘計時器

我試圖在React組件內創建一個時鐘計時器。但是我有困難。任何幫助，將不勝感激。React JS，在組件內創建一個時鐘計時器

import React from "react"; 
import ReactDOM from "react-dom"; 

export default class App extends React.Component { 
    render() { 
    return (
     <ShowDate /> 
    ); 
    } 
} 

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

function ShowDate() { 
    return {new Date().toLocaleTimeString()}; 
} 

setInterval(ShowDate, 1000);

來源

2016-12-28 AmirHossein Rd

如果我要刪除整個組件，只是在ReactDOM中渲染函數，那麼它就可以工作。我只是想學習如何將其轉換爲組件。 –

這對我來說似乎很不習慣。爲什麼不把setInterval關閉到'this.state'並適當地改變呢？ –

你能告訴我們你得到的錯誤/更多的信息，而不僅僅是「我有困難」嗎？ –

的陣營教程有這個例子：

function tick() { 
    const element = (
    <div> 
     <h1>Hello, world!</h1> 
     <h2>It is {new Date().toLocaleTimeString()}.</h2> 
    </div> 
); 
    ReactDOM.render(
    element, 
    document.getElementById('root') 
); 
} 

setInterval(tick, 1000);

最有可能的，你會避免編寫代碼這樣。請參閱以下注意事項：

注意事項：實際上，大多數React應用程序只能調用一次ReactDOM.render（）。在接下來的部分中，我們將學習如何將這些代碼封裝到有狀態的組件中。我們建議您不要跳過主題，因爲它們互相構建。

class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.updateDate = this.updateDate.bind(this); 
 
    
 
    this.state = { 
 
     date: new Date().toLocaleTimeString(), 
 
    } 
 
    this.interval = setInterval(this.updateDate, 1000); 
 
    } 
 
    
 
    componentWillUnmount() { 
 
    clearInterval(this.interval); 
 
    } 
 
    
 
    updateDate() { 
 
    this.setState({ 
 
     date: new Date().toLocaleTimeString(), 
 
    }); 
 
    } 
 
    
 
    render() { 
 
    return(
 
     <div>{this.state.date}</div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, 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>

如果你只是在教程進行操作，請你的代碼可以做出同樣的方式作爲例子的工作：

const App =() => (
 
    <div>{new Date().toLocaleTimeString()}</div> 
 
); 
 

 
function tick() { 
 
    ReactDOM.render(
 
    <App />, 
 
    document.getElementById('root') 
 
); 
 
} 
 
    
 
ReactDOM.render(<App/>, document.getElementById('root')); 
 
setInterval(tick, 1000);

<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="root"></div>

來源

2016-12-28 04:50:02 DTing

感謝您的幫助。它絕對有用。有沒有辦法做到這一點，而不使用狀態？ –

謝謝，我感謝你的幫助。 –

React JS，在組件內創建一個時鐘計時器

回答

相關問題