主页 / coding / 问题 / 77692957
Accepted
meez
Asked: 2023-12-21 00:03:48 +0800 CST

如何有条件地将 HTML 属性添加到 Astro 中的元素

  • 772

我正在使用 Astro 和 TypeScript。

如何有条件地将 HTML 属性添加rel="noreferrer"到 Astro 中的元素？

那么当targetBlank = false它不在reldom 中渲染属性时呢？

或者是有条件地显示另一个 HTML 元素的唯一解决方案？

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

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

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

1 个回答

  1. Best Answer

    使用undefined：

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

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

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

相关问题