Fatal编程技术网

Javascript 非常简单的时钟

javascript reactjs

Javascript 非常简单的时钟,javascript,reactjs,Javascript,Reactjs,如何在react中使用setInterval函数来重复渲染react中的函数。请提供一个非常简单的例子。我正在使用NodeJS本地环境。在这里，我尝试一个新的文件结构（但我的文件结构是不同的）。我不知道迪德蒙特等。。刚刚开始 下面是我的应用程序。jsx import React,{ Component } from 'react'; class App extends Component { good(){ {new Date().toLocaleTimeString()} } re

如何在react中使用setInterval函数来重复渲染react中的函数。请提供一个非常简单的例子。我正在使用NodeJS本地环境。在这里，我尝试一个新的文件结构（但我的文件结构是不同的）。我不知道迪德蒙特等。。刚刚开始

下面是我的应用程序。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;

import React，{Component}来自'React'；
类应用程序扩展组件{
好的{
{new Date（）.toLocaleTimeString（）}
}
render（）{
返回(
{setInterval（（）=>this.good（），500）}

);
}
}
导出默认应用程序；
main.js

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


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

从“React”导入React；
从“react dom”导入react dom；
从“/App.jsx”导入应用程序；
ReactDOM.render（，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>


反应应用程序
我的文件夹结构如下所示

我建议您阅读更多关于React组件、状态和道具的内容，因为这些是您首先选择使用React的基本部分。基本步骤是：

  • 将时间存储为组件的状态
  • 组件加载后立即开始勾选功能（这就是componentDidMount所做的-在页面中加载组件时触发）
  • 在每个勾选上使用setState更改时间值（setState触发器渲染）
如果您遵循这些步骤，您将获得与站点示例类似的结果，这就是实际操作的方式（如果您确实希望在React design中执行此操作）

我建议您阅读更多关于React组件、状态和道具的信息，因为这些是您首先选择使用React的基本部分。