婷婷同學_
2022-09-02 10:35:27
因此,我正在使用我的第一個Nextjs應用程序,并且在添加持久性側邊欄時遇到問題。我在 nextjs 中找到了 Adam Wathan 關于持久布局的文章,但似乎最近使用 _app.js 頁面添加了一個更新的模式。我去看了文檔和一些圍繞它的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;如何將側邊欄組件集成到此組件中?我嘗試過將其添加到組件旁邊,包裝組件和其他一些迭代,但沒有運氣。希望我只是錯過了一些簡單的東西。
1 回答
慕村225694
TA貢獻1880條經驗 獲得超4個贊
這很奇怪。我可以發誓我以前嘗試過這個非常簡單的解決方案,但這樣的東西完全足夠了。
此解決方案將使用側邊欄中的子屬性在您正在訪問的頁面中提供內容。
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} />
</>
)
}
添加回答
舉報
0/150
提交
取消
