如何在react jsx中使汉堡菜单适合整个页面

Question

<p>我对 React jsx 很陌生，我正在使用 Tailwind，它非常好。我也在边走边学。因此，在我的导航中，我能够显示汉堡菜单，但我不喜欢它们的显示方式。我试图确保整个页面都充满白色页面，请参见下面的第二张图片。</p> <p>这就是我能够实现的目标，但我认为它看起来不太干净</p> <p>我想要实现的目标，或类似的目标，白色填充整个网站并显示选项</p> <p>我现在的问题是，用我的代码；我怎样才能做到这一点？这是我的导航 jsx，我将不胜感激任何帮助。我是唯一的团队成员，没有首席开发人员可以提供帮助。</p>

从“./favicon.png”导入徽标；
从“framer-motion”导入{motion}；
从“react-intersection-observer”导入{useInView}；
从“./MenuDropdown”导入MenuDropdown；
从“react-router-dom”导入{链接}；
从“react”导入{useState}；

导出默认函数 Navigation() {
  const [ref, inView] = useInView({ triggerOnce: false });
  const [isOpen, setIsOpen] = useState(false);

  const [navVisible, setNaVisible] = useState(false);

  const megaMenu = document.getElementById(“mega-menu”);

  返回 （
    <运动导航
      className =“flex items-center justify- Between flex-wrap px-6 lg:px-12 py-8 max-w-full mx-auto”
      参考={参考}
      初始={{ y: -10, 不透明度: 0 }}
      动画={在视图中？ { y: 0, 不透明度: 1 } : {}}
      退出={{ y: -10, 不透明度: 0 }}
      过渡={{持续时间:0.5}}
    >
      
        <img src={logo} className=“w-8 h-8” alt="徽标"></img>
        
Jibu Labs
      </a>

      

        <按钮
          className =“flex items-center px-3 py-2 border rounded text-slate-200 border-slate-400uration-100 悬停：文本白色悬停：边框白色”
          onClick={() =>; setNaVisible(!navVisible)}
        >
          
;
      

        

          

            <span className=“ring-1 p-0.5 环-白色圆形-全”</span>
            <链接
              to=“项目”
              类名={`${
                !nav可见
                  ？ “块 mt-4 lg:内联块 lg:mt-0 文本白色 mr-4”
                  ：“块 mt-4 lg:inline-block lg:mt-0 text-white mr-4 justify-end”
              }`}
            >
              工作
            
          

          {!nav可见？ (
            
; setIsOpen((上一个) => !上一个)}
            >
              <span className=“ring-1 p-0.5 环-白色圆形-全”</span>
              

                效率
              
              
;
          ) : (
            

              <span className=“ring-1 p-0.5 环-白色圆形-全”</span>
              <链接
                to＝“策略”
                className="block mt-4 lg:inline-block lg:mt-0 text-white mr-4 justify-end pr-1"
              >
                效率
              
            
          )}

          

            <span className=“ring-1 p-0.5 环-白色圆形-全”</span>
            
              关于
            </a>
          

          

            <span className=“ring-1 p-0.5 环-白色圆形-全”</span>
            
              职业机会
            </a>
          

          

            <span className=“ring-1 p-0.5 环-白色圆形-全”</span>
            
              接触
            </a>
          

        

      
;

      >
      
    </motion.nav>
  ）；
}</pre></p>

Answer 1

要用白色或其他背景颜色填充整个页面，您需要一个外部 div，将高度设置为 100vh，宽度设置为 100vw。 100vh 表示将高度设置为 Web 浏览器屏幕视口高度的 100%，100vw 表示将高度设置为视口宽度的 100%。

return (
   <div style={{height: "100vh", width: "100vw", maxWidth: "100%", background: "white"}}>
    <motion.nav
      className="flex items-center justify-between flex-wrap px-6 lg:px-12 
   ...
    </motion.nav>
  </div>

将 maxWidth 设置为 100% 是为了防止在 body 标签有 padding 或有其他外部组件占用空间时显示滚动条。

以上使得motion.nav组件占据整个页面。您可能希望将整个页面 div 向上移动到使用该组件的 JSX。

希望这有帮助。