亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 Nextjs 中添加一個持久組件到_app.js

在 Nextjs 中添加一個持久組件到_app.js

婷婷同學_ 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} />

    </>

  )

}


查看完整回答
反對 回復 2022-09-02
  • 1 回答
  • 0 關注
  • 203 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號