es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Las asignaciones de propiedades abreviadas son válidas solo en patrones de desestructuración – svelte

Las asignaciones de propiedades abreviadas son válidas solo en patrones de desestructuración – svelte

26 Jul, 2023 Programación

Tengo este componente svelte en un archivo llamado BarEl.svelte

BarEl.svelte

<script>
  import { fly } from 'svelte/transition';
  export let xValue;
  export let yValue;
  export let widthValue;
  export let heightValue;
  export let fillValue;
</script></p>

<rect
  x={xValue}
  y={yValue}
  width={widthValue}
  height={heightValue}
  fill={fillValue}
  stroke="black"
  stroke-width="2"
  in:fly={{y=-200, duration: 500 }}
/>

donde lo uso en otro componente svelte llamado BarChart.svelte

BarChart.svelte


<script lang="ts">
import BarEl from './BarEl.svelte';//Aquí TypeScript dice que BarEl.svelte no tiene exportaciones predeterminadas
</script>
...
{#each $PopulationStore as item (item.id)}
<BarEl
xValue={xScale(item.country)}
yValue={yScale(item.population)}
widthValue={xScale.bandwidth()}
heightValue={innerHeight - yScale(item.population)}
fillValue={colorScale(item.population)}
/>
{/each}

Estoy enfrentando dos problemas:

  • TypeScript dice que BarEl.svelte no tiene exportaciones predeterminadas. ¿Qué significa esto?
  • Cuando intento animar las barras usando la transición incorporada fly, obtengo el error que dice Las asignaciones de propiedades abreviadas solo son válidas en patrones de desestructuración, y aparece una línea roja ondulada debajo de y en in:fly={{y=-200,..}}.

No sé por qué ocurren estos problemas y, por lo tanto, cómo solucionarlos. Agradezco cualquier ayuda.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Problema 1: BarEl.svelte no tiene exportaciones predeterminadas en TypeScript

    El mensaje de error “BarEl.svelte no tiene exportaciones predeterminadas” significa que necesitas exportar el componente BarEl como una exportación predeterminada en BarEl.svelte, o importarlo usando llaves en BarChart.svelte. Para solucionarlo, puedes agregar export default BarEl; al final de BarEl.svelte, de esta manera:

    <script>
  import { fly } from 'svelte/transition';
  export let xValue;
  export let yValue;
  export let widthValue;
  export let heightValue;
  export let fillValue;
</script>

<rect x="{xValue}" y="{yValue}" width="{widthValue}" height="{heightValue}" fill="{fillValue}" stroke="black" stroke-width="2" in:fly="{{y=-200," duration:="" 500="" }}=""></rect>

export default BarEl;

    O puedes importarlo usando llaves en BarChart.svelte:

    <script lang="ts">
  import { BarEl } from './BarEl.svelte';
</script>

    Problema 2: Las asignaciones de propiedades abreviadas son válidas solo en patrones de desestructuración en la transición fly

    El mensaje de error “Las asignaciones de propiedades abreviadas son válidas solo en patrones de desestructuración” significa que no puedes usar la sintaxis de propiedad abreviada ({ y }) al asignar valores en la transición fly. Para solucionarlo, puedes usar la sintaxis completa ({ y: -200 }) o utilizar la desestructuración para extraer la propiedad y:

    <rect ...="" in:fly="{{" y:="" -200,="" duration:="" 500="" }}=""></rect>

    o

    <rect ...="" let="" flyprops="{" y:="" -200,="" duration:="" 500="" };="" in:fly="{{" ...flyprops="" }}=""></rect>

Comments are closed.