我是React的新手，我正在尝试按照这个滴答时钟示例进行操作，但要有所不同。我希望在ReactDOM中呈现index.js。这是我的代码：
Timer.js：
import React from 'react';
const Timer = () => {
const tick = () => {
return new Date().toLocaleTimeString().toString();
};
const element = (
<div>
<h1>Hello World!</h1>
<h2>It is {tick()} !</h2>
</div>
);
return (
element
);
};
export default Timer;App.js：
/*jshint esversion: 8 */
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Timer from './Timer'
function App() {
return (
<div className="App">
<Timer />
</div>
);
}
export default App;index.js：
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import App from './App';
setInterval(ReactDOM.render(<App />, document.getElementById("root")), 1000);
serviceWorker.unregister();但是它仅在屏幕上显示当前时间，而不打勾。为什么代码setInterval(ReactDOM.render(<App />, document.getElementById("root")), 1000);不起作用index.js？
避免直接调用render函数是一个好习惯，您可以使您Timer的Component随状态变化而更新，这就是反应如何对其生命周期进行处理。例如：
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {
time: new Date().toLocaleTimeString().toString()
};
}
tick() {
this.setState({
time: new Date().toLocaleTimeString().toString()
});
}
componentDidMount() {
this.intervalID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.intervalID);
}
render() {
return (
<div>
<h1>Hello World!</h1>
<h2>It is {this.state.time} !</h2>
</div>
);
}
}
export default Timer;
注意，我使用了两个React循环函数componentDidMount和componentWillUnmount，以便在完成装模后再次更新组件，并使用另一个在React卸载组件后清除interval变量。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句