Início / coding / Perguntas / 77692957
Accepted
meez
Asked: 2023-12-21 00:03:48 +0800 CST

Como adicionar condicionalmente um atributo HTML a um elemento no Astro

  • 772

Estou usando Astro e TypeScript.

Como adiciono condicionalmente um atributo HTML rel="noreferrer"a um elemento no Astro?

Então, quando targetBlank = falsenão renderiza relatributos no dom?

Ou a única solução é mostrar condicionalmente outro elemento 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 respostas

  1. Best Answer

    usar 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

relate perguntas