javascript - Hur tilldelar man olika värden till href-elementet i NavLink i Chakra Navbar?

Jag vill ge href-elementet i NavLink-komponenten som värde för Links-arrayen. Kan jag ge ett värde till href med hjälp av map-funktionen?

För att vara tydlig, skulle jag vilja ge href-elementen i NavLink-funktionen värdena 'Home', 'Projects' och 'Careers'. (Inte "#")

Länkarray

const Links = ['Home', 'Projects', 'Careers'];

NavLink-funktion

const NavLink = ({ children }: { children: ReactNode }) => (
  <Link
    px={2}
    py={1}
    rounded={'md'}
    _hover={{
      textDecoration: 'none',
      bg: useColorModeValue('#00afff', '#00afff'),
    }}
    href={'#'}
  >
    {children}
  </Link>
);

Använda komponenter

<HStack spacing={8} alignItems={'center'}>
  <NavBarLogo src= {HdhLogo} />
  <HStack
    as={'nav'}
    spacing={4}
    display={{ base: 'none', md: 'flex' }}>
    {Links.map((link) => (
      <NavLink key={link}>{link}</NavLink>
    ))}
  </HStack>
</HStack>

Svar #1

Eftersom Links-arrayen är en array av strängar

const Links = ['Home', 'Projects', 'Careers'];

som skickas som barn

{Links.map((link) => (
  <NavLink key={link}>
    {link}
  </NavLink>
))}

Skicka bara children-egenskapen till href-egenskapen

const NavLink = ({ children }: { children: ReactNode }) => (
  <Link
    px={2}
    py={1}
    rounded={'md'}
    _hover={{
      textDecoration: 'none',
      bg: useColorModeValue('#00afff', '#00afff'),
    }}
    href={children}
  >
    {children}
  </Link>
);

Det kan dock vara bättre att exponera en href-egenskap på NavLink-komponenten.

const NavLink = ({ children, href }: { children: ReactNode, href: string }) => (
  <Link
    px={2}
    py={1}
    rounded={'md'}
    _hover={{
      textDecoration: 'none',
      bg: useColorModeValue('#00afff', '#00afff'),
    }}
    href={href}
  >
    {children}
  </Link>
);

...

{Links.map((link) => (
  <NavLink key={link} href={link}>
    {link}
  </NavLink>
))}