react中使用屏保

1,默认路由路径为屏保组件

 1 <HashRouter history={hashHistory}>
 2                     <Switch>
 3                      <Route exact path="/" component={ScreenSaver} />
 4                         <Route exact path="/brandIntroduce" component={BrandIntroduce} />
 5                         <Route exact path="/category" component={Category} />
 6                         <Route exact path="/productList/:id" component={ProductList} />
 7                         <Route exact path="/productDetail/:id" component={ProductDetail} />
 8                         <Route exact path="/officialWebsite" component={OfficialWebsite} />
 9                     </Switch>
10                 </HashRouter>

2,render部分，父级加入点击事件

1 <div className="main-container" onClick={this.handleClick}>

3,点击事件，定时10分钟，无点击屏幕，调到屏保组件中，起到屏保作用

1     handleClick() {
2         clearTimeout(timeout1);
3         timeout1 = setTimeout(() => {
4             LocalServices.saveSelectedSlide('');
5             hashHistory.push('/');
6             // location.reload();
7         },100000);
8     },

 

转载于:https://www.cnblogs.com/yinhao-jack/p/10619933.html