我在下面添加示例代码。

import React, { useEffect, useRef, useState } from 'react';

const Navbar = ({ links }) => {
  const navbarRef = useRef(null);
  const [overflowLinks, setOverflowLinks] = useState([]);

  useEffect(() => {
    const navbar = navbarRef.current;
    const linksArray = Array.from(navbar.getElementsByTagName('a'));

    const navbarWidth = navbar.offsetWidth;
    let currentWidth = 0;
    const overflowLinksArray = [];

    linksArray.forEach((link, index) => {
      const linkWidth = link.offsetWidth;

      if (currentWidth + linkWidth > navbarWidth) {
        overflowLinksArray.push(index);
      } else {
        currentWidth += linkWidth;
      }
    });

    setOverflowLinks(overflowLinksArray);
  }, [links]);

  return (
    <div>
      <div className="navbar" ref={navbarRef}>
        {links.map((link, index) => (overflowLinks.indexOf(index) == -1 ?
          <a key={index} href={link[1]}  style={{color:'green'}}>
            {link[0]}
          </a> : null
        ))}
      </div>

      {overflowLinks.length > 0 && (
        <div className="more-links-dropdown">
          {overflowLinks.map((index) => {
            const link = links[index];
            return <a key={index} href={link[1]} style={{color:'red'}}>
              {link[0]}
            </a>
          })}
        </div>
      )}
    </div>
  );
};

// Example usage
const App = () => {
  const linksArray = [
    ['Link 1', '/link1'],
    ['Link 2', '/link2'],
    ['Link 1', '/link1'],
    ['Link 2', '/link2'],
    ['Link 1', '/link1'],
    ['Link 2', '/link2'],
    ['Link 1', '/link1'],
    ['Link 2', '/link2'],
    ['Link 1', '/link1'],
    ['Link 2', '/link2'],
    ['Link 1', '/link1'],
    ['Link 2', '/link2'],
    ['Link 1', '/link1'],
    ['Link 2', '/link2'],
    ['Link 1', '/link1'],
    ['Link 2', '/link2'],
    ['Link 1', '/link1'],
    ['Link 2', '/link2'],
    ['Link 1', '/link1'],
    ['Link 2', '/link2'],
    // Add more links as needed
  ];

  return <Navbar links={linksArray} />;
};

export default App;

字符串

import React, { useRef, useEffect, useState } from 'react';

const YourNavbar = ({ links }) => {
  const navbarRef = useRef(null);
  const [overflowingLinks, setOverflowingLinks] = useState([]);

  useEffect(() => {
    const navbarWidth = navbarRef.current.offsetWidth; // Get navbar width

    let totalWidth = 0;
    const overflowLinks = [];

    // Measure each anchor element and calculate total width
    links.forEach((link) => {
      const anchor = document.getElementById(link.href); // Get anchor element by ID
      if (anchor) {
        const { width } = anchor.getBoundingClientRect(); // Get width of anchor element
        totalWidth += width;

        if (totalWidth > navbarWidth) {
          overflowLinks.push(link); // Add overflowing links to a separate array
        }
      }
    });

    setOverflowingLinks(overflowLinks);
  }, [links]);

  return (
    <nav ref={navbarRef}>
      {links.map((link) => (
        <a key={link.href} id={link.href} href={link.href}>
          {link.text}
        </a>
      ))}

      {/* Render More Links dropdown */}
      {overflowingLinks.length > 0 && (
        <div className="more-links-dropdown">
          {overflowingLinks.map((link) => (
            <a key={link.href} href={link.href}>
              {link.text}
            </a>
          ))}
        </div>
      )}
    </nav>
  );
};

export default YourNavbar;

字符串
说明：此代码测量导航栏中每个锚元素的宽度，并将其与可用空间（navbarWidth）进行比较。如果锚元素的总宽度超过可用空间，则它将识别哪些链接溢出（overflowingLinks），并将其呈现在“更多链接”选项卡或单独的容器中。