Добавление постоянного компонента в _app. js в Nextjs - PullRequest
Новая
       4

Добавление постоянного компонента в _app. js в Nextjs

1 голос
/ 25 мая 2020

Итак, я экспериментирую со своим первым приложением Next js и у меня проблемы с добавлением постоянной боковой панели.

Я нашел статью Адама Уотана о постоянных макетах в следующем js, но похоже, что есть более новый шаблон, который был недавно добавлен с использованием страницы _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 Ответ

1 голос
/ 26 мая 2020

Это странно. Я мог бы поклясться, что раньше пробовал это очень простое решение, но чего-то вроде этого было вполне достаточно.

Это решение будет отображаться на странице, на которой вы используете опору для детей на боковой панели. 

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} />
    </>
  )
}
...