El CMS devuelve HTML con elementos personalizados con los accesorios respectivos.
<!-- index.html --> <svelte-accordion props='{"toggleAll":true}'> <svelte-accordion-item props='{"title":"Accordion item 1"}'> <p>Content of the first accordion item</p> </svelte-accordion-item> <svelte-accordion-item props='{"title":"Accordion item 2"}'> <p>Content of the second accordion item</p> </svelte-accordion-item> <svelte-accordion-item props='{"title":"Accordion item 3"}'> <p>Content of the third accordion item</p> </svelte-accordion-item> </svelte-accordion>La idea es usar componentes Svelte para los elementos personalizados como este:
// Accordion.svelte <svelte:options tag="svelte-accordion" /> <script> export let props; </script> <slot parentProps={props} /> // AccordionItem.svelte <svelte:options tag="svelte-accordion-item" /> <script> export let props; export let parentProps; const { title } = JSON.parse(props); // parentProps is undefined console.info('__parentProps__', parentProps); </script> <h2>{title}</h2> <slot /> En el ejemplo anterior, AccordionItem.svelte no puede recibir los apoyos pasados por Accordion.svelte . La razón puede ser que los accesorios se pasan a <slot> dentro de Accordion.svelte y no directamente a <svelte-accordion-item> .
¿Cómo podemos solucionar esto?
¡Gracias por tu ayuda!
Cuando haces <slot parentProps={props}> , los parentProps no se envían automáticamente al contenido del accesorio, sino que están disponibles en forma de let:parentProps en el componente Accordion . Tenga en cuenta que esto tiene mucho sentido si considera que no tiene que usar un componente para llenar un espacio :
<Accordion> <span>Some content here</span> </Accordion>¡En el ejemplo anterior no hay un Componente al que enviar esos accesorios!
Para resolver su problema, podría considerar usar ContextAPI esto nos permite hacer que las variables estén disponibles para todos los descendientes de un componente.
<!-- Accordion.svelte --> <svelte:options tag="svelte-accordion" /> <script> import { setContext } from 'svelte'; export let props; setContext('parentProps', props) </script> <slot /> <!-- AccordionItem.svelte --> <svelte:options tag="svelte-accordion-item" /> <script> import { getContext } from 'svelte'; export let props; const parentProps = getContext('parentProps'); const { title } = JSON.parse(props); // parentProps is undefined console.info('__parentProps__', parentProps); </script> <h2>{title}</h2> <slot />