Erstellen Sie eine Navigationsleiste ähnlich der Toast-UI-Startseite

Question

Meine Inspirationsquelle: Ich wollte eine Navigationsleiste wie diese erstellen: Toastui-Startseite. Um dies zu erreichen, habe ich versucht, so viel wie möglich zu kopieren. Ich erhalte Folgendes: Was ich möchte Ich möchte so etwas (diese wurden durch Bildbearbeitung erstellt): Option 1: Mittenbündig Option 2: Linksbündig Ich möchte, dass die Position der verknüpften Liste dynamisch ist, je nachdem, was sie enthält. Der Speicherort der Linkgruppe. Ich habe es nur nach links ausgerichtet. Das heißt, ich möchte, dass sich die Linkliste für eine bessere Benutzeroberfläche direkt unter der Linkgruppe befindet, die sie enthält. Können Sie mir sagen, wie ich das bekomme, indem ich meinen Code und meine Box bearbeite?

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”，左侧填充自然减少。但我不知道该怎么做。

Meine Inspirationsquelle

Was habe ich getan

Was will ich