速记属性分配仅在解构模式中有效 - svelte答案

【问题标题】：Shorthand property assignments are valid only in destructuring patterns - svelte速记属性分配仅在解构模式中有效 - svelte
【发布时间】：2022-01-23 07:10:06
【问题描述】：

我在一个名为 BarEl.svelte 的文件中有这个 svelte 组件

BarEl.svelte

<script>
  import { fly } from 'svelte/transition';
  export let xValue;
  export let yValue;
  export let widthValue;
  export let heightValue;
  export let fillValue;
</script>

<rect
  x={xValue}
  y={yValue}
  width={widthValue}
  height={heightValue}
  fill={fillValue}
  stroke="black"
  stroke-width="2"
  in:fly={{y=-200, duration: 500 }}
/>

我在另一个名为 BarChart.svelte 的 svelte 组件中使用它

BarChart.svelte

<script lang="ts">
 import BarEl from './BarEl.svelte';//Here TypeScript says BarEl.svelte has no default exports
</script>
...
{#each $PopulationStore as item (item.id)}
      <BarEl
        xValue={xScale(item.country)}
        yValue={yScale(item.population)}
        widthValue={xScale.bandwidth()}
        heightValue={innerHeight - yScale(item.population)}
        fillValue={colorScale(item.population)}
      />
    {/each}

我面临两个问题：

TypeScript 说 BarEl.svelte 没有默认导出。这是什么意思？
当我尝试使用内置的fly 转换为条形设置动画时，我收到Shorthand property assignments are valid only in destructuring patterns 的错误，并且in:fly={{y=-200,..}} 中的y 下方有一条弯曲的红线。

我不知道为什么会出现这些问题，以及如何解决它们。感谢您的帮助

【问题讨论】：

对于你的第二期，这是一个错字，你传递了一个对象，y 是一个属性，所以它应该是in:fly={{y: -200, .. }}。但是，不知道您的默认导出问题，我从来没有显式导出组件。可能是配置问题？
糟糕，多么愚蠢的错误。感谢您指出错误。但是，过渡仍然不起作用。但这是另一个问题。
我对“没有默认导出”问题的猜测是，由于错字，这是一个后续问题。如果文件语法正确（错字已修复），它应该能够识别默认导出。

标签： d3.js transition svelte

【解决方案1】：

关于问题 1 - 我猜测（但尚未检查）您可能需要 BarE1.svelte 的脚本标签上的 lang="ts"？

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。