所以我正在尝试我的第一个 Nextjs 应用程序，但在添加持久侧边栏时遇到了麻烦。
我找到了Adam Wathan's article在 nextjs 中的持久布局上，但似乎最近使用 _app.js 页面添加了一个更新的模式。我去了the docs以及一些围绕它的 github 问题，但看起来还没有很多围绕它的文档。
因此，对于我的示例，我有我的 _app.js 文件:
import '../css/tailwind.css'
import Head from 'next/head'
import Sidebar from "../components/Sidebar";
export default function App({Component, pageProps}){
return(
<>
<Head />
<Component {...pageProps} />
</>
)
}
import React, { useState } from "react";
import Transition from "../components/Transition";
import Link from 'next/link'
function Sidebar({ children }) {
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const [hideSidebarMenu, setHideSidebarMenu] = useState(true);
const openSidebar = () => {
setIsSidebarOpen(true);
setHideSidebarMenu(false);
};
const closeSidebar = () => {
setIsSidebarOpen(false);
};
const hideSidebar = () => {
setHideSidebarMenu(true);
};
return(
<div>
/*sidebar links here*/
</div>
)
}
export default Sidebar;
如何将我的侧边栏组件集成到其中？我尝试将其添加到组件和包装组件旁边以及其他一些迭代，但没有成功。希望我只是错过了一些简单的事情。
最佳答案
这很奇怪。我可以发誓我以前尝试过这个非常简单的解决方案，但这样的东西已经完全足够了。
此解决方案将使用侧边栏中的 Children 属性填充您所在的页面。
import '../css/tailwind.css'
import Head from 'next/head'
import Sidebar from "../components/Sidebar";
export default function App({Component, pageProps}){
return(
<>
<Head />
<Sidebar >
<Component {...pageProps} />
</Sidebar>
</>
)
}
此选项只会渲染侧边栏以及内容
import '../css/tailwind.css'
import Head from 'next/head'
import Sidebar from "../components/Sidebar";
export default function App({Component, pageProps}){
return(
<>
<Head />
<Sidebar />
<Component {...pageProps} />
</>
)
}
关于javascript - 在 Nextjs 中向 _app.js 添加持久组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62006153/