function函数引用它自己，并在没有导入的情况下提取数据

Question

我购买了此模板，并试图了解这个代码中的“{ getLayout ()}”在初始加载时转到哪个页面。我猜它是一个全局变量，但我无法用定义找到它。我正试图在next.js文档，下工作，但我有一些问题。如果有人在这方面有一个很好的教程，我会很乐意接受的。

import type { AppProps } from 'next/app';
import { appWithTranslation } from 'next-i18next';
import { SessionProvider } from 'next-auth/react';
import '@/assets/css/main.css';
import 'react-toastify/dist/ReactToastify.css';
import { ToastContainer } from 'react-toastify';
import { ModalProvider } from '@/components/ui/modal/modal.context';
import ManagedModal from '@/components/ui/modal/managed-modal';
import ManagedDrawer from '@/components/ui/drawer/managed-drawer';
import DefaultSeo from '@/components/seo/default-seo';
import { SearchProvider } from '@/components/ui/search/search.context';
import PrivateRoute from '@/lib/private-route';
import { CartProvider } from '@/store/quick-cart/cart.context';
import SocialLogin from '@/components/auth/social-login';
import { NextPageWithLayout } from '@/types';
import QueryProvider from '@/framework/client/query-provider';
import { getDirection } from '@/lib/constants';
import { useRouter } from 'next/router';

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

function CustomApp({
  Component,
  pageProps: { session, ...pageProps },
}: AppPropsWithLayout) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout ?? ((page) => page);
  const authenticationRequired = Component.authenticationRequired ?? false;
  const { locale } = useRouter();
  const dir = getDirection(locale);

  return (
    <div dir={dir}>
      <SessionProvider session={session}>
        <QueryProvider pageProps={pageProps}>
          <SearchProvider>
            <ModalProvider>
              <CartProvider>
                <>
                  <DefaultSeo />
                  {authenticationRequired ? (
                    <PrivateRoute>
                      {getLayout(<Component {...pageProps} />)}
                    </PrivateRoute>
                  ) : (
                    getLayout(<Component {...pageProps} />)
                  )}
                  <ManagedModal />
                  <ManagedDrawer />
                  <ToastContainer autoClose={2000} theme="colored" />
                  <SocialLogin />
                </>
              </CartProvider>
            </ModalProvider>
          </SearchProvider>
        </QueryProvider>
      </SessionProvider>
    </div>
  );
}

export default appWithTranslation(CustomApp);

Answer 1

基本上，您可以定义一个组件布局。为此，在定义组件时，添加一个名为getLayout的属性。这里有一个例子，为了更好的理解。

// ...
const Component: React.FC = () => <div>
  I have a custom layout
</div>

// Here we define a layout, let's imagine it's a component
// we have inside /layouts and we have previously imported it
Component.getLayout = (page: React.ReactElement) =>
  <LayoutComponent>{page}</LayoutComponent>

现在，当呈现一个页面时(注意，在下一个JS应用程序中，所有页面都被呈现为_app.{js,jsx,ts,tsx}内部的一个子页面)，您的代码将检查getLayout是否已经定义。然后，它基本上是调用这样的函数，如果存在的话，否则它会呈现基本组件。