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.

Sintaxis correcta para el componente dinámico de Svelte y el preprocesador Pug.

31 May, 2023 Programación

El siguiente componente:

<template lang="pug">
svelte:component.OverflowSafeSingleLineLabel(this="{rootElementTag}")
    span.OverflowSafeSingleLineLabel-TextWithIncreasedLineHeight
        slot
</template>

<script lang="ts" context="module">
const rootElementTag: string = "div";
</script>

Provoca el siguiente error:

Uncaught TypeError: switch_value is not a constructor

Si se intenta utilizar como un componente hijo.

Si se cambia el elemento raíz a:

.OverflowSafeSingleLineLabel

El error desaparecerá. Pero, ¿cómo se puede hacer que OverflowSafeSingleLineLabel sea dinámico?
Espero que sea solo un error mío, el novato (para 2021) en Svelte.
📄 Código fuente

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el código actual es que svelte:component espera una definición válida de componente Svelte, pero OverflowSafeSingleLineLabel es una función que devuelve una definición de componente. Para hacer que OverflowSafeSingleLineLabel sea dinámico, necesitamos envolverlo en un componente de orden superior al que se le pueda pasar un parámetro para determinar el elemento raíz. Aquí hay un ejemplo de cómo podemos lograr esto:

    <template lang="pug">
  // Definir un componente de orden superior que envuelve OverflowSafeSingleLineLabel
  svelte:component(Component, { rootElementTag })

  // Utilizar el componente envuelto de la forma habitual
  Component
    span.OverflowSafeSingleLineLabel-TextWithIncreasedLineHeight
      slot
</template>

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

  // Definir el componente de orden superior que toma rootElementTag
  function OverflowSafeSingleLineLabelWrapper(props) {
    const { rootElementTag } = props;
    return {
      Component: OverflowSafeSingleLineLabel,
      props: { rootElementTag },
    }
  }

  // Exportar el componente de orden superior
  export default OverflowSafeSingleLineLabelWrapper;
</script>

    Este código define un componente de orden superior llamado OverflowSafeSingleLineLabelWrapper que toma rootElementTag como parámetro. OverflowSafeSingleLineLabelWrapper envuelve el componente OverflowSafeSingleLineLabel y le pasa el parámetro rootElementTag. Luego, en la plantilla, se utiliza svelte:component para renderizar OverflowSafeSingleLineLabelWrapper, que devuelve el componente envuelto.

    Para utilizar OverflowSafeSingleLineLabelWrapper en un componente hijo, se lo puede importar y utilizar de la siguiente manera:

    <template lang="pug">
  // Pasar rootElementTag como parámetro
  OverflowSafeSingleLineLabelWrapper(rootElementTag="div")
</template>

<script>
  import OverflowSafeSingleLineLabelWrapper from './OverflowSafeSingleLineLabelWrapper.svelte';
</script>

    Ahora se puede utilizar OverflowSafeSingleLineLabelWrapper como un componente dinámico con un elemento raíz personalizable.

Comments are closed.