Início / coding / Perguntas / 79352679
Accepted
Keygun2k1
Asked: 2025-01-13 23:27:22 +0800 CST

Como usar diretivas svelte em componentes que usam runas svelte?

  • 772

Tenho este componente svelte que atualmente está usando a use:diretiva de svelte runes:

<script>
    import {route} from "@mateothegreat/svelte5-router";

    let {children, className, ...rest} = $props();
</script>

<a
        use:route
        class={`btn ${className}`}
        {...rest}
>
    {@render children()}
</a>

Ao tentar passá-lo como prop, recebo um erro de renderização: "Svelte: Este tipo de diretiva não é válido em componentes". Aqui está como estou tentando usar a diretiva como prop:

<ButtonLink
       onclick={() => $currentRoute = window.location.pathname}
       href={href}
       class:active={isActive}
    >

O class:active={isActive}está dando o erro. Existe uma maneira de passar o uso de diretivas para um componente em runas svelte? Se sim, como e o que estou fazendo errado?

svelte

1 respostas

  1. Best Answer

    use:não pode ser usado em componentes, mas esse não é o problema aqui, pois aé um elemento. class:também não pode ser usado em componentes, então você tem que contornar isso.

    Desde o Svelte 5.16 você pode passar classes como objetos/arrays que usam clsxinternamente. Então aqui você pode passar um objeto usando o flag:

    <script>
    import Component from './Component.svelte';
    let active = $state(false);
</script>

<label>
    <input bind:checked={active} type="checkbox"/>
    Active
</label> <br>

<Component class={{ 'red': active }} />

    <!-- Component.svelte -->
<script>
    // Rename of `class` attribute on destructuring is required
    // since `class` is a keyword.
    // With just `className`, the attribute would also have
    // to be called just that: <Component className="...">
    const { class: className, ...rest } = $props();
</script>

<!-- className and fixed classes also need to be passed as
     object here, so values are resolved correctly. -->
<span class={['big', className]}>Hello</span>
...

    Parque infantil

    Se você não estiver usando esse mecanismo, você terá que transformar manualmente o sinalizador em uma string de classe, por exemplo, no seu exemplo

    <ButtonLink class="{isActive ? 'active' : ''}">...

    Em relação ao classatributo em componentes: Você também pode obtê-lo de props rest/all the props, desde que a propagação aconteça antes de definir a classe manualmente, dessa forma ele será sobrescrito com a combinação correta de classes locais e passado em algumas. Por exemplo

    <script>
    let { text, ...rest } = $props();
</script>

<span {...rest} class={['big', rest.class]}>
  {text}
</span>
    • 1

relate perguntas