Next.js 13个键盘快捷键

blmhpbnm  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(145)

在一个没有实验应用目录的普通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),而文档说“根布局默认是服务器组件,不能设置为客户端组件。”
我该怎么做?

o2rvlv0m

o2rvlv0m1#

在layout.tsx中,你可以在页面的顶部使用'useclient'标签。如果你想避免这种情况,你还可以做的是使用一个客户端 Package 器,例如PageWrapper,然后用这个 Package 器 Package 布局中的所有内容,并将 Package 器设置为客户端,然后在其中设置侦听器,应用上下文,以便在所有子元素之间共享,这样就可以了。

相关问题