有条件地渲染仅用作正文背景元素的图像，这样它们就不会在内容太少的页面上添加高度

问题描述 投票：0回答：1

我在 NextJS 组件的 RootLayout 中有一些 NextJS 图像组件，并给它们负 z 索引并将它们绝对定位，因为某些内容是动态的，我希望它们放置在与内容相关的位置。问题是，虽然它们已被定位到基本路径“/”，但它们在内容少于基本路径的页面上沿 y 轴创建了过高的高度。我尝试过第三方模块，例如反应测量和主体滚动锁，但遇到了客户端与服务器端渲染的问题，因为图像位于根目录。

这是根布局的结构：

 <body className={`overflow-x-hidden flex flex-col items-center ${monoDrip.className} bg-zinc-200 text-zinc-900 relative md:max-w-[1920px] pt-28 sm:pt-36`}>
      <div className={`bg-[#BBDDF2] absolute -z-[10] top-[-6rem] right-[11rem] h-[31.25rem] w-[35.25rem] rounded-full blur-[10rem] sm:w-[68.75rem]`} ></div>
      <div className={`bg-[#e9ffe7] absolute -z-[10] top-[-1rem] left-[-35rem] h-[31.25rem] w-[50rem] rounded-full blur-[10rem] sm:w-[68.75rem] md:left[-33rem] lg:left-[-28rem] xl:left-[-15rem] 2xl:left-[-5rem]`} ></div>
      <Image src={Squares} alt={"Background Squares"} priority={true} className={`opacity-50 xs:hidden absolute -z-[10] top-[40rem] right-[-18rem] max-w-full object-contain`} />
      <Image src={Squares} alt={"Background Circles"}  priority={true} className={`rotate-180 opacity-50 xs:hidden absolute -z-[10] top-[40rem] left-[-28rem] max-w-full object-contain`} />
      <Image src={Waves} alt={"Background Waves"} priority={true} className={`opacity-80 xs:hidden absolute -z-[10] top-[82.1rem] right-[-1.6rem] max-w-full object-contain`} />
      <Image src={Waves} alt={"Background Waves"} priority={true} className={`opacity-80 xs:hidden absolute -z-[10] top-[398.9rem] right-[-1.6rem] max-w-full object-contain`} />
      <Image src={Waves2} alt={"Background Waves"} priority={true} className={`opacity-90 w-[60rem] xs:hidden absolute -z-[10] top-[164rem] right-[-0.4rem] max-w-full object-contain`} />
      <Image src={Waves2} alt={"Background Waves"} priority={true} className={`rotate-180 w-[60rem] opacity-90 xs:hidden absolute -z-[10] top-[164rem] left-[-0.7rem] max-w-full object-contain`} />
      <Image src={Waves2} alt={"Background Waves"} priority={true} className={`opacity-90 w-[60rem] xs:hidden absolute -z-[10] top-[164rem] right-[-0.4rem] max-w-full object-contain`} />
      <Image src={Waves2} alt={"Background Waves"} priority={true} className={`rotate-180 w-[60rem] opacity-90 xs:hidden absolute -z-[10] top-[164rem] left-[-0.7rem] max-w-full object-contain`} />
      <Image src={Circles} alt={"Background Waves"} priority={true} className={`w-[37.5rem] opacity-90 xs:hidden absolute -z-[10] top-[255.7rem] left-[-20.3rem] max-w-full object-contain`} />
      <Image src={Circles} alt={"Background Waves"} priority={true} className={`w-[37.5rem] opacity-90 xs:hidden absolute -z-[10] top-[295.7rem] right-[-20.3rem] max-w-full object-contain`} />
      <ActiveSectionContextProvider >
        <Header />
        {children}
      </ActiveSectionContextProvider>

      </body>

这是子组件：

<main className={`flex flex-col items-center px-[4]`}>
  <Intro />
  <SectionDivider />
  <About />
  <SectionDivider />
  <Services />
  <SectionDivider />
  <Careers />
  <SectionDivider />
  <Community />
  <SectionDivider />
  <Contact />
</main>

我需要一种方法来根据元素数量（我尝试使用平均高度）有条件地渲染图像，但没有成功或直接渲染它们的高度（使用 .offset 方法只为我返回 1）

reactjs next.js tailwind-css styling conditional-rendering
1个回答
0
投票

我认为你错误地解决了这个问题。最好的方法是为每个部分传递一个背景图像。例如，任何给定页面上的 

<Intro />
部分都会接受一个名为“背景”的道具，您可以传递任何您想要的背景。这将解决内容较多或较少的页面上“高度过高”的问题，因为每个部分只有一个背景，而不是静态数量的背景部分。

<main className={`flex flex-col items-center px-[4]`}>
  <Intro background={Squares} />
  <SectionDivider />
  <About background={Waves} />
  <SectionDivider />
  <Services background={Waves2} />
  <SectionDivider />
  <Careers background={Squares} />
  <SectionDivider />
  <Community background={Circles} />
  <SectionDivider />
  <Contact background={Circles} />
</main>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.