在一个没有实验应用目录的普通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 器设置为客户端，然后在其中设置侦听器，应用上下文，以便在所有子元素之间共享，这样就可以了。