Javascript 在Reactjs中检查整个组件中的用户不活动

我有一个react应用程序，其中有几个路由呈现多个组件。如何检查所有页面的用户不活动状态。如果用户在任何页面中处于非活动状态超过5分钟，我希望执行一个执行某些操作的函数，如果用户执行一些活动，如单击、输入等，则非活动时间应重置回5分钟

研究了这些答案，但没能做到

可以只使用香草Javascript而不使用任何包吗

提前谢谢

软件包将为您完成这项工作

你可以这样安装它

sudo npm安装反应空闲计时器

或

npm安装反应空闲计时器-保存

组件使用

import React，{Component}来自“React”
从“反应空闲计时器”导入空闲计时器
导出默认类YourApp扩展组件{
建造师（道具）{
超级（道具）
this.idleTimer=null
this.handleOnAction=this.handleOnAction.bind（this）
this.handleOnActive=this.handleOnActive.bind（this）
this.handleOnIdle=this.handleOnIdle.bind（this）
}
render（）{
返回(
{this.idleTimer=ref}}
超时={1000*60*15}
onActive={this.handleOnActive}
onIdle={this.handleOnIdle}
onAction={this.handleOnAction}
去盎司={250}
/>
{/**此处是您的应用程序/组件。*/}
)
}
行动（事件）{
日志（'用户做了什么'，事件）
}
活动（事件）{
console.log（'用户处于活动状态'，事件）
console.log（'time remaining'，this.idleTimer.getRemainingTime（））
}
空闲（事件）{
console.log（'用户空闲'，事件）
console.log（'last active'，this.idleTimer.getLastActiveTime（））
}
}

钩子用法

从“React”导入React
从“反应空闲计时器”导入{useIdleTimer}
从“./App”导入应用程序
导出默认功能（道具）{
const handleOnIdle=事件=>{
console.log（'用户空闲'，事件）
log（'last active'，getLastActiveTime（））
}
const handleOnActive=事件=>{
console.log（'用户处于活动状态'，事件）
log（'剩余时间'，getRemainingTime（））
}
const handleOnAction=事件=>{
日志（'用户做了什么'，事件）
}
常量{getRemainingTime，getLastActiveTime}=useIdleTimer({
超时时间：1000*60*15，
onIdle:handleOnIdle，
onActive:handleon主动，
行动：行动，
去盎司：500
})
返回(
{/**此处是您的应用程序/组件。*/}
)
}

---

它们提供了许多功能，您可以在GitHub上阅读，网址为

Hi there，基于链接的答案可以是评论。虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能无效。-你试过了吗？什么不起作用？