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.

Svelte pasando número como propiedad

05 Jun, 2023 Programación

Soy un traductor de español que traduce documentos de TI. Traduzca lo siguiente al español. No traduzca el código ni la salida en markdown.

Soy nuevo en Svelte y estoy tratando de pasar un valor de número como propiedad. Aquí está el código a continuación.

<script lang="ts">
  import Infobox from "./Infobox.svelte";
</script>

<infobox classcount="2" taskcount="6"></infobox>
<style></style>

<script lang="ts">
  export let taskCount: number;
  export let classCount: number;
</script>

<section>
  <div>{taskCount} Tareas</div>
  <div>Clase {classCount}</div>
</section>

<style></style>

No puedo pasar la propiedad como número y solo acepta una cadena como

<infobox classcount="2" taskcount="6"></infobox>

Estoy usando TypeScript en este proyecto también.

¡Gracias de antemano!

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para solucionar este problema, puede especificar explícitamente el tipo de las props en el componente padre y también en el componente hijo.

    En el componente hijo Infobox.svelte, debe agregar una anotación de tipo para las props que se pasan, de esta manera:

    <script lang="ts">
  export let taskCount: number;
  export let classCount: number;
</script>

<section>
  <div>{taskCount} Tareas</div>
  <div>Clase {classCount}</div>
</section>

<style></style>

    En el componente padre, puede declarar y pasar las props de la siguiente manera:

    <script lang="ts">
  import Infobox from "./Infobox.svelte";
  let taskCount = 6;
  let classCount = 2;
</script>

<infobox classcount="{classCount}" taskcount="{taskCount}"></infobox>

<style></style>

    Al utilizar llaves {} alrededor de los valores que se pasan como props, puede asegurarse de que se interpreten como números, no como cadenas.

    Esto debería solucionar su problema y permitirle pasar props numéricas desde el componente padre al componente hijo en Svelte mientras usa TypeScript.

Comments are closed.