我想将Header
组件用作时钟计时器。我希望我的页面每秒渲染一次。我在谷歌搜索中遵循了一些例子。但是,找不到这样的例子。为什么这个tick()
功能不起作用?控制台中没有错误。
这是我的第一个代码:
class index extends React.Component<Props, {}> {
constructor({ title }: Props) {
super({ title });
}
render() {
return (
<Layout title={this.props.title}>
<div className="header"><Header/></div>
<div className="search-bar"><SearchBar/></div>
<div className="Footer"><Footer/></div>
</Layout>
);
}
}
第二个代码:
class Header extends React.Component<{}, States>{
intervalID: any;
constructor() {
super({}, {});
this.state = {
date: new Date().toLocaleString(),
}
this.tick = this.tick.bind(this);
}
componentDidMount() {
this.intervalID = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.intervalID);
}
tick() {
this.setState({
date: new Date().toLocaleString(),
})
}
render() {
return (
<header>
<p>Header: {this.state.date}</p>
</header>
);
}
}
export default Header;
此代码(Node.js 路由器)调用First
页面。App
使用“express-react-view”作为其视图引擎。
import { Request, Response } from "express";
/**
* Get /
* Home page.
* @param req
* @param res
*/
export let index = (req: Request, res: Response) => {
res.render("index", {"title": "React, Front-end"})
};
你在做服务器端渲染(就是这样做的express-react-view
),这意味着你的 React 组件的生命周期钩子不会被调用。
因此,componentDidMount()
不会调用间隔触发器 on 。这篇文章很好地解释了为什么会这样。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句