在 Nextjs 中添加一个持久组件到_app.js

在 Nextjs 中添加一个持久组件到_app.js

因此，我正在使用我的第一个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;

如何将侧边栏组件集成到此组件中？我尝试过将其添加到组件旁边，包装组件和其他一些迭代，但没有运气。希望我只是错过了一些简单的东西。

婷婷同学_

浏览 163回答 1

1回答

慕村225694

这很奇怪。我可以发誓我以前尝试过这个非常简单的解决方案，但这样的东西完全足够了。此解决方案将使用侧边栏中的子属性在您正在访问的页面中提供内容。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

0

随时随地看视频慕课网APP

相关分类

JavaScript