Astro中如何为元素条件性添加HTML属性？

不用重复渲染两个<a>元素，Astro本身支持通过设置属性值为undefined来让属性不输出到DOM中，这是最简洁的解决方案。

你当前的代码里，当targetBlank为false时，rel=''会渲染出空的rel属性（即<a rel="">），这不符合你要完全移除该属性的需求。只需要把空字符串换成undefined即可：

---
type Props = {
  to: string;
  targetBlank?: boolean;
};

const { to, targetBlank = false } = Astro.props;
---

<a
  href={to}
  target={targetBlank ? '_blank' : '_self'}
  rel={targetBlank ? 'noreferrer' : undefined}
>
  <slot />
</a>

另外补充个小建议：当使用target="_blank"时，通常建议同时添加noopener属性来避免潜在的安全风险，你可以直接把rel的值改成'noopener noreferrer'，逻辑保持不变：

rel={targetBlank ? 'noopener noreferrer' : undefined}

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