基于Chakra-ui <Tag>实现带交互功能的可点击组件需求

这里是符合你需求的完整组件实现，基于Chakra UI的Tag组件扩展了所有要求的交互特性：

import { Tag, Tooltip } from '@chakra-ui/react';

const ClickableTag = ({ listElement }) => {
  const tagName = listElement?.name || 'Unnamed';
  const tagUrl = listElement?.url;

  // 无URL时禁用交互并降低透明度
  if (!tagUrl) {
    return (
      <Tag
        bgColor="gray.50"
        border="1px solid"
        borderColor="gray.400"
        fontSize="10px"
        p={1.5}
        size="sm"
        opacity={0.7}
      >
        {tagName}
      </Tag>
    );
  }

  return (
    <Tooltip label={tagName} placement="top">
      <Tag
        as="a"
        href={tagUrl}
        bgColor="gray.50"
        border="1px solid"
        borderColor="gray.400"
        fontSize="10px"
        p={1.5}
        size="sm"
        cursor="pointer"
        // 聚焦/按压状态的样式变化
        _focus={{ bgColor: 'gray.200', borderColor: 'gray.500' }}
        _active={{ bgColor: 'gray.300', borderColor: 'gray.600' }}
        // 可选：新窗口打开链接
        // target="_blank"
        // rel="noopener noreferrer"
      >
        {tagName}
      </Tag>
    </Tooltip>
  );
};

export default ClickableTag;

特性对应说明： #

• 跳转链接支持：将Tag的as属性设为"a"，绑定href到元素的URL，实现原生语义化跳转；如需新窗口打开，添加target="_blank"和rel="noopener noreferrer"即可。
• 悬浮Tooltip：用Chakra UI的Tooltip组件包裹Tag，设置label为元素名称，鼠标悬浮时自动显示提示。
• 聚焦/按压变色：通过Chakra的伪类属性_focus和_active，自定义聚焦、按压状态下的背景色与边框色，可根据需求调整颜色值。
• 点击跳转：借助原生<a>标签的默认行为实现跳转；若需自定义逻辑（如框架路由跳转），可移除as="a"和href，改用onClick={() => window.location.href = tagUrl}（或对应框架的路由方法）。

使用方式： #

传入包含name和url的listElement对象即可：

<ClickableTag listElement={{ name: '示例标签', url: '/example-page' }} />

内容的提问来源于stack exchange，提问作者RobyB