在一个没有实验应用目录的普通Next.js 13应用中,你可以设置如下的键盘快捷键:
import { useCallback, useEffect } from 'react';
export default function App() {
const handleKeyPress = useCallback((event: KeyboardEvent) => {
console.log("Key pressed:", event.key);
}, []);
useEffect(() => {
document.addEventListener('keydown', handleKeyPress);
return () => {
document.removeEventListener('keydown', handleKeyPress);
};
}, [handleKeyPress]);
...
字符串
对于实验性的app目录,我想我应该在layout.tsx
中做一些类似的事情。我不能这样做,因为我需要useEffect(client),而文档说“根布局默认是服务器组件,不能设置为客户端组件。”
我该怎么做?
1条答案
按热度按时间o2rvlv0m1#
在layout.tsx中,你可以在页面的顶部使用'useclient'标签。如果你想避免这种情况,你还可以做的是使用一个客户端 Package 器,例如PageWrapper,然后用这个 Package 器 Package 布局中的所有内容,并将 Package 器设置为客户端,然后在其中设置侦听器,应用上下文,以便在所有子元素之间共享,这样就可以了。