测试纤细的动态组件

Question

我不久前首次推出 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

Answer 1

问题出在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}