React项目组件仅在窗口尺寸变更后才渲染的问题求助

问题概述 #

基于JS Mastery教程制作的React个人作品集网站中，自定义的ProjectCard组件出现渲染异常：卡片容器本身不显示，仅文本内容可选中；调整浏览器窗口尺寸后卡片随机显示；平板等小设备需完全缩放页面才偶尔可见。已尝试调整flex属性但未解决问题。

修复方案 #

1. 修正Tilt组件配置与布局冲突 #

Tilt组件的嵌套flex布局可能导致容器高度坍塌，同时需确保组件正确初始化：

• 确保已安装依赖：npm install react-parallax-tilt
• 移除Tilt组件上的flex sm:flex-row flex-col类，避免和内部布局冲突，保留核心样式：

  <Tilt
    options={{
      max: 20,
      scale: 1,
      speed: 450,
    }}
    className='bg-tertiary p-10 rounded-2xl w-full shadow-card'
  >
  

2. 完善motion组件动画触发逻辑 #

动画配置缺失初始/触发状态，可能导致组件默认隐藏：

• 给motion.div添加initial="hidden"和animate="show"属性，强制触发动画：

  <motion.div 
    initial="hidden"
    animate="show"
    variants={fadeIn("up", "spring", index * 0.1, 0.75)} 
    className='w-full p-4'
  >
  

• 检查fadeIn函数实现，确保返回正确的动画变体：

  const fadeIn = (direction, type, delay, duration) => ({
    hidden: {
      y: direction === 'up' ? 80 : -80,
      opacity: 0,
    },
    show: {
      y: 0,
      opacity: 1,
      transition: {
        type,
        delay,
        duration,
        ease: 'easeOut',
      },
    },
  });
  

3. 调整容器尺寸避免坍塌 #

固定高度在小屏幕下易被压缩，改用最小高度确保容器可见：

• 将图片容器的h-[300px]改为min-h-[300px]：

  <div className='relative w-full sm:w-1/2 min-h-[300px]'>
  

4. 排查样式与资源问题 #

• 确认bg-tertiary类的背景色并非透明，与页面背景区分开：

  .bg-tertiary {
    background-color: #2d3748; /* 示例颜色，根据你的主题调整 */
  }
  

• 检查图片资源路径是否正确，添加加载失败 fallback：

  <img
    src={image}
    alt='project_image'
    className='w-full h-full object-fill rounded-2xl'
    onError={(e) => e.target.src = '/path-to-fallback-image'}
  />
  

内容的提问来源于stack exchange，提问作者Kabir Thakur