Javascript 如何为 Chakra Navbar 中 NavLink 的 href 元素分配不同的值

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

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

<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>

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

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

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

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>
))}

Javascript相关问答推荐

主要内部的ExtJS多个子应用程序

如何访问Json返回的ASP.NET Core 6中的导航图像属性

Phaser框架-将子对象附加到Actor

IMDB使用 puppeteer 加载更多按钮(nodejs)

单击子元素时关闭父元素(JS)

类型自定义lazy Promise. all

从WooCommerce Checkout Country字段重新排序国家，保持国家同步

Snowflake JavaScript存储过程返回成功，尽管预期失败

如何禁用附加图标点击的v—自动完成事件

为什么当我解析一个promise时，输出处于挂起状态？

如何在ASP.NET JavaScript中使用Google Charts API仅对绘制为负方向的条形图移动堆叠条形图标签位置

Rxjs流中生成IMMER不能在对象上操作

AJAX POST在控制器中返回空(ASP.NET MVC)

JS Animate()方法未按预期工作

有没有办法更改Chart.js 3.x.x中主要刻度的字体？

固定动态、self 调整的优先级队列

Plotly.js栏为x轴栏添加辅助文本

需要刷新以查看Mern堆栈应用程序中的更改

使用JavaScript或PHP从div ID值创建锚标记和链接

如何将PNG图像放在wix站点的Open Streemap map 上，使PNG图像成为 map 不可分割的一部分？