如何在 Reactjs 的条件下添加 class

Question

我正在使用 Reactjs（Nextjs），我有“主页”和其他几个页面（关于，服务......等），为了集成到 Nextjs，我创建了“_document.js”，问题是没有 class 附带主页中的“标签”，但 class 在“页面的关于，服务和 rest”上添加，那么如何根据页面添加“类”？ 换句话说，我想在除“主页”之外的所有页面上添加 class“main-layout inner_page”，我该怎么做？ 这是我的“_document.js”文件

import { Html, Head, Main, NextScript,link } from 'next/document'
import { fileURLToPath } from 'url'
export default function Document() {
  return (
    <Html>
        <Head>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/style.css" />
      </Head>
      <body>
        <Main />
        <NextScript />
      <script src="/js/jquery.min.js"></script>
      </body>
    </Html>
  )
}

Answer 1

我会指定每页使用的布局：NextJS Layout per-page

但是您也可以从 _app 或您的页面将道具传递给您的布局，例如：（不推荐的方法）

const CustomApp: FC<AppProps> = ({ Component, pageProps, router }) => {
  return (
      <MainLayout
        hasContainer={pageProps.hasContainer}
        hasSecondClass={['/', '/company'].includes(router.pathname)}
      >
            <Component {...pageProps} />
      </MainLayout>
  );
};

而你的页面可以改变 hasContainer

export const getStaticProps: GetStaticProps = async ({ locale }) => {
  return {
    props: {  hasContainer: false },
  };
};

如何在 Reactjs 的条件下添加 class

问题描述

1 个解决方案

解决方案1
0 2022-08-31 14:30:24

如何在 Reactjs 的条件下添加 class

问题描述

1 个解决方案

解决方案1 0 2022-08-31 14:30:24

解决方案1
0 2022-08-31 14:30:24