创建一个类似于toast ui主页的导航栏

Question

我的灵感来源我想制作这样的导航栏：Toastui主页我做了什么我尝试尽可能多地复制来实现这一目标。我得到以下信息：我想要什么我想要像这样的（这些是通过图像编辑制作的）：选项1：居中对齐选项2：左对齐我希望链接列表的位置是动态的，具体取决于包含它的链接组的位置。我所做的只是将其左对齐。也就是说，我希望链接列表直接位于包含它的链接组下方，以便获得更好的UI。你能告诉我如何通过编辑我的代码和框来获得这个

P粉690200856 · Answer

设置 link-list 的 paddingLeft link-group 的 x 坐标

使用GetElementById

export const useGetElementById = (id) => {
  const [element, setElement] = useState(null);

  useEffect(() => {
    setElement(document.getElementById(id));
  }, [id]);

  return element;
};

将 link-list 分离到组件中并接收 linkGroupId 作为 props。并设置 link-list 的 paddingLeft link-group 的 x 坐标

interface Props {
  linkGroupId: string;
  pages: AppPage[];
}

export const LinkList = ({ linkGroupId, pages }: Props) => {
  const [linkGroupX, setLinkGroupX] = useState(0);
  const linkGroupEl = useGetElementById(linkGroupId);

  useEffect(() => {
    if (!linkGroupEl) return;
    const linkGroupRect = linkGroupEl.getBoundingClientRect();
    setLinkGroupX(linkGroupRect.left);
  }, [linkGroupEl]);

  return (
    
      {pages.map((page) => (
        
          
            {page.title}
          
        
      ))}
    
  );
};

设置link-group的Id

  ...

  {pagesKeys.map((key) => {
    const pages = PAGES.get(key) || [];
      return (
        
          {key}
          
            
          
         
       );
     })}

    ...

然后我就能够获取 option2。

如果“LinkList”溢出，最好不要换行，直到“LinkList”填充“.link-list-box”，左侧填充自然减少。但我不知道该怎么做。