Question

如何使用setInterval函数进行反应，以反复渲染函数。请提供一个非常简单的例子。我正在使用Node js本地环境。在这里，我正在尝试simple clock given in react documentation（但我的文件结构不同）。我不知道didMount等。刚开始。

以下是我的App.jsx

WITH your_table AS (SELECT 1001 order_no, '1010037-00L' part_no, 1 r_from, 5 r_to FROM dual UNION ALL
                    SELECT 1001 order_no, '1010025-00L' part_no, 6 r_from, 12 r_to FROM dual)
SELECT r_from + LEVEL -1 r_no,
       order_no,
       part_no
FROM   your_table
CONNECT BY PRIOR order_no = order_no
           AND PRIOR part_no = part_no
           AND PRIOR sys_guid() IS NOT NULL
           AND LEVEL <= r_to - r_from + 1
ORDER BY r_no;

      R_NO   ORDER_NO PART_NO
---------- ---------- -----------
         1       1001 1010037-00L
         2       1001 1010037-00L
         3       1001 1010037-00L
         4       1001 1010037-00L
         5       1001 1010037-00L
         6       1001 1010025-00L
         7       1001 1010025-00L
         8       1001 1010025-00L
         9       1001 1010025-00L
        10       1001 1010025-00L
        11       1001 1010025-00L
        12       1001 1010025-00L

main.js

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

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

的index.html

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


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

我的文件夹结构如下

folder structure

Answer 1

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

将时间存储为组件的状态。
组件加载后立即启动滴答功能（ componentDidMount 的功能 - 当组件在页面中加载时触发它）
在每个刻度线上使用 setState 来更改时间值（setState触发器渲染）

如果您按照这些步骤操作，您将获得与React网站相似的结果，这就是它应该如何实现（如果您真的想在React设计中这样做）

非常简单的时钟反应js

1 个答案: