时间戳

首页 > 解决方案 > 测试纤细的动态组件

svelte - 测试纤细的动态组件

问题描述

我不久前首次推出 Svelte 并开始了一个项目，但在组件方面遇到了一些问题。

我有 2 个数组（boxes1 和 box2），它们的内容显示在每个循环中，两个不同的 div 彼此相邻。我们可以通过单击添加按钮将元素添加到每个数组：左边的 box1 和右边的 box2。两个数组中的每个元素都有一个从 1 开始的 id，并且每次删除数组中的所有元素时都会重置为 1。两个 div 中的每个奇数元素都是基于红色背景组件的动态组件。两个 div 中的每个偶数元素都是基于蓝色背景组件的动态组件。两个 div 中的每个元素都可以通过单击元素内的按钮来删除：通过单击按钮，元素内的组件会向父组件发送事件，以便在销毁之前从数组中删除元素。

问题是：在一个数组中添加一些元素然后将它们全部删除，然后再次添加元素后，添加的第一个元素不会显示在 div 中，但存在于数组中。删除所有元素后不重置 id 可以解决问题，但我需要重置它。

我可以理解我的解释很混乱，所以这里是 REPL： https ://svelte.dev/repl/ae13251cf3ac4c12ba10eabe20f376d1?version=3.44.0

标签： sveltesvelte-3svelte-component

解决方案

问题出在on:destroy您设置的地方show = false，因此，当您从数组show = false中删除最后一个元素时，这就是未显示第一个组件的原因。您可以Box.svelte像这样更新组件：

<script>
  import { onMount, createEventDispatcher } from "svelte";
    
  export let template;
  export let templateProps;

  let show = true;

  const dispatch = createEventDispatcher();
    
    $: if(templateProps && templateProps.heading == 0){
        show = true;
    }

  const destroy = () => {
    show = false;
    dispatch("destroy");
  };
</script>

{#if show}
  <svelte:component
    this={template}
    on:close={() => destroy()}
    {...templateProps}
  />
{/if}

推荐阅读