如何使用react-idle-timer处理多个选项卡

Question

我有一个react应用程序，在那里我需要显示一个模式与两个按钮(注销和继续会话)当用户空闲时，它实际上与react-idle-timer中的IdleTimer组件一起工作得很好。

但是如果我在多个选项卡中打开应用程序，并在一个选项卡中单击继续会话，其他选项卡不会接收到，我使用的示例代码是，

<IdleTimer
timeout={1000}
onIdle={// Opens a modal with two buttons Logout and Continue Session}
></IdleTimer>

是否可以使用crossTab道具?但我不确定如何实现它们。

我如何才能实现我的要求与多个选项卡工作，以便如果我点击继续会话所有的选项卡需要关闭模态。

我使用的版本是-react-idle-timer (4.6.4)

有人能帮我实现我的要求吗?提前感谢!!

Answer 1

您可以使用文档中的跨选项卡消息传递功能:

// Action dispatcher (redux)
const dispatch = useDispatch()
// Message handler 
const onMessage = data => {
switch (data.action) {
case 'LOGOUT_USER':
dispatch(logoutAction())
break
// More actions
default:
// no op
}
}
// IdleTimer instance
const { message } = useIdleTimer({ onMessage })
// Logout button click
const onLogoutClick = () => {
// Tell all tabs to log the user out. 
// Passing true as a second parameter will
// also emit the event in this tab.
message({ action: 'LOGOUT_USER' }, true)
}

请参阅v5的文档，在这里。