小编Mau*_*ira的帖子

如何将数据从布局传递到 Next.js 应用程序文件夹中的子级？

我遇到的一个常见用例是在布局中使用一个按钮来切换子项中的某些内容。例如，您可以在持久布局中设置一个通知按钮，该按钮会在主应用程序中打开侧窗格。

理想情况下，您可以将isNotificationsPaneOpen状态传递给子级并让他们渲染窗格。然而，Next 13 beta 文档说这是不可能的：

在父布局与其子布局之间传递数据是不可能的。但是，您可以在一个路由中多次获取相同的数据，React 会自动删除请求的重复数据，而不会影响性能。

在后端保持这种切换状态似乎是一种重大的矫枉过正，而且感觉不自然。后端不必知道前端打开或关闭通知面板。

在我看来，这是一个足够常见的用例，人们经常会遇到这个问题。

人们通常应该如何看待这一问题？

具体例子：

// in layout.tsx

export default function NavbarLayout({
  children, 
}: {
  children: React.ReactNode,
}) {
  const [isNotificationsPaneOpen, setIsNotificationsPaneOpen]= useState(false);
  return (
    <div>
      <nav>
        <button onClick={()=>setIsNotificationsPanelOpen((prevValue)=>!prevValue)}>Notifications</button>
      </nav>
      {/* How do I pass isNotificationsPaneOpen to children? */}
      {children}
    </div>
  );
}

Run Code Online (Sandbox Code Playgroud)

所以在页面中：

// in page.tsx
interface PageProps {
  isNotificationsPaneOpen: boolean;
}

function Page({isNotificationsPaneOpen}:PageProps):JSX.Element {
    // render something conditionally with isNotificationsPaneOpen
    ...
}

Run Code Online (Sandbox Code Playgroud)

目前的解决方案