React 中的固定 vs 动态导航链接菜单切换样式

Source: Dev.to

固定高度方案

在这种方案中，我们在菜单展开时设置一个固定的高度。当你事先知道菜单的高度时，这种方法效果很好。

import { useState } from 'react';
import { FaBars } from 'react-icons/fa';
import { links } from './data';

const Navbar = () => {
  const [showLinks, setShowLinks] = useState(false);

  return (
    
       setShowLinks(!showLinks)}>
        
      

      
        

          {links.map(link => (
            
              {link.text}
            
          ))}
        

      
    
  );
};

export default Navbar;

.links-container {
  height: 0;
  overflow: hidden;
  transition: height 250ms ease-in-out;
}

.links-container.open {
  height: 10rem; /* Adjust as needed */
}

在这个例子中，菜单容器的高度默认被设为 0，当菜单打开时，高度被设为 10rem。

动态高度方案

动态高度方案会根据内容自动调整菜单的高度。如果你的项目中项目数量不固定，这是一个很好的选择。

import { useState, useRef } from 'react';
import { FaBars } from 'react-icons/fa';
import { links } from './data';

const Navbar = () => {
  const [showLinks, setShowLinks] = useState(false);
  const linksRef = useRef(null);

  const linksContainerStyles = {
    height: showLinks ? `${linksRef.current?.offsetHeight}px` : 0,
  };

  return (
    
       setShowLinks(!showLinks)}>
        
      

      
        

          {links.map(link => (
            
              {link.text}
            
          ))}
        

      
    
  );
};

export default Navbar;

.links-container {
  overflow: hidden;
  transition: height 250ms ease-in-out;
}

在这种情况下，高度会根据菜单内部的内容动态计算。当菜单打开时，其高度会自动调整以适应内容。

关键区别

• 固定高度：高度需要手动设置，除非你主动修改，否则不会变化。实现简单，但灵活性较低。
• 动态高度：高度会根据内容自动调整。灵活性更高，但实现稍微复杂一些。

结论

这两种方法各有适用场景。如果你的菜单项数量固定，使用固定高度方案即可；如果菜单项可能会变化或需要更大的灵活性，建议使用动态高度方案。

致谢：John Smilga 的课程