尽管有内容，但反应视差组件显示高度为 0？答案

【问题标题】：React parallax component showing height of 0 despite having content?尽管有内容，但反应视差组件显示高度为 0？
【发布时间】：2022-10-22 04:08:11
【问题描述】：

语境：我正在尝试向我的网站主页添加视差效果，但我的视差组件 AdvanceBanner 的高度为 0，即使正在渲染子 div。

每当我尝试在一个空白的 react 项目上渲染这个组件时，一切都按预期工作，但是当我将它移到我的主要 nextjs 项目时，它不会按预期显示。

这告诉我它要么是父组件的东西，要么是网站的样式。

这是所有相关的内容，非常感谢任何形式的帮助/建议:)

高级横幅.tsx

import { ParallaxBanner } from "react-scroll-parallax";
import { BannerLayer } from "react-scroll-parallax/dist/components/ParallaxBanner/types";

export const AdvancedBannerTop = () => {
  const background: BannerLayer = {
    image:
      "https://i.postimg.cc/662d6ZT1/Galaxy.png",
    translateY: [0, 50],
    opacity: [1, 0.3],
    scale: [1.05, 1, "easeOutCubic"],
    shouldAlwaysCompleteAnimation: true
  };

  const headline: BannerLayer = {
    translateY: [0, 30],
    scale: [1, 1.05, "easeOutCubic"],
    shouldAlwaysCompleteAnimation: true,
    expanded: false,
    children: (
      <div className="inset center">
        <h1 className="headline white">Gaming Galaxy</h1>
      </div>
    )
  };

  const foreground: BannerLayer = {
    image:
      "https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-foreground.png",
    translateY: [0, 15],
    scale: [1, 1.1, "easeOutCubic"],
    shouldAlwaysCompleteAnimation: true
  };

  const gradientOverlay: BannerLayer = {
    opacity: [0, 1, "easeOutCubic"],
    shouldAlwaysCompleteAnimation: true,
    expanded: false,
    children: <div className="gradient inset" />
  };

  return (
    <ParallaxBanner
      layers={[background, headline, foreground, gradientOverlay]}
      className="full"
    />
  );
};

视差应用程序.tsx

import { ParallaxProvider } from "react-scroll-parallax";
import { AdvancedBannerTop } from "./AdvancedBanner";
import './styles.module.css'

export default function ParallaxApp() {
  return (
    <ParallaxProvider>
      <AdvancedBannerTop/>
      <div className="center full background">
        <h1 className="headline text-cloudy-day font-oxanium-bold">TEXT TWO</h1>
      </div>
    </ParallaxProvider>
  );
}

样式.module.css


.subline {
  font-family: "Oxanium", Helvetica, Arial, sans-serif;
  font-weight: 250;
  font-size: 1vw;
}

.headline {
  font-family: "Oxanium", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 10vw;
}

.inset {
  position: absolute;
  inset: 0;
}
.white {
  color: white;
}
.gray {
  color: #ffffff;
}

.full {
  height: 100vh;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gradient {
  background: linear-gradient(rgba(193, 28, 133, 0.5) 50%, #1F1329);
}

.background {
  background-image: url('./area_bg01.jpg');
}

布局.tsx

      <main className="bkg1 py-6 md:py-12">
        <div>{children}</div>
      </main>

Index.tsx（主页）

import ParallaxApp from "../components/Parallax Space/ParallaxApp"

function Home() {
  return (
    <div>
      <ParallaxApp/>
    </div>
  );

}

export default Home;

主页上目前只显示“TEXT TWO”，但进一步检查，由于 ParallaxApp 的高度为 0，所有 4 个 BannerLayer 都被渲染为不显示。

【问题讨论】：

标签： node.js reactjs react-native next.js parallax

【解决方案1】：

我发现的两个选项是将height 或aspect-ratio 应用于ParallaxBanner styles（对我来说使用css 道具，因为我正在使用情感）

github repo 在自述文件底部有 v3 故事书演示，源代码在 stories/（在 v3 分支上）

【讨论】：