Svelte导入组件后无法获取反馈数组，返回组件类实例

问题原因 #

你直接将导入的Svelte组件（构造函数类）当作变量输出，而不是实例化组件并正确使用其props。Svelte中，导入的组件是一个类，不是组件内部的props数据，所以会输出组件的类代码而非预期的数组。

解决方案 #

方案1：将数据与组件分离（推荐） #

把反馈数组放在单独的JS模块中，组件专注于渲染逻辑：

1. 创建src/components/feedbacks.js：

export default [
  {text: 'Its good', rate: 7}, 
  {text: 'alright', rate: 6}, 
  {text: 'terrible', rate: 2}
];

2. 修改App.svelte：

<script>
  // 导入数据而非组件
  import feedback from "./components/feedbacks.js";
</script>

<main>
  {#each feedback as item}
    <p>评价：{item.text}，评分：{item.rate}</p>
  {/each}
</main>

方案2：正确使用组件并渲染列表 #

如果需要组件负责渲染反馈内容，按以下方式修改：

1. 更新feedbacks.svelte，添加渲染逻辑：

<script>
    export let feedback = [
      {text: 'Its good', rate: 7}, 
      {text: 'alright', rate: 6}, 
      {text: 'terrible', rate: 2}
    ];
</script>

{#each feedback as item}
  <div class="feedback-item">
    <p>{item.text}</p>
    <span>评分：{item.rate}</span>
  </div>
{/each}

<style>
  .feedback-item {
    margin: 1rem 0;
    padding: 0.5rem;
    border: 1px solid #eee;
    border-radius: 4px;
  }
</style>

2. 修改App.svelte，以标签形式实例化组件：

<script>
  // Svelte约定组件名首字母大写
  import Feedbacks from "./components/feedbacks.svelte";
</script>

<main>
  <!-- 用标签形式使用组件，组件会自动渲染内部的反馈列表 -->
  <Feedbacks />
</main>

方案3：从组件实例中获取props（不推荐，仅作了解） #

如果必须从父组件直接获取子组件的props，需要开启组件的accessors选项：

1. 在feedbacks.svelte中添加：

<svelte:options accessors/>

2. 修改App.svelte绑定组件实例并读取props：

<script>
  import Feedbacks from "./components/feedbacks.svelte";
  let feedbackComponent;
  let feedbackArray;

  // 组件挂载后读取props
  $: if (feedbackComponent) {
    feedbackArray = feedbackComponent.feedback;
  }
</script>

<main>
  <Feedbacks bind:this={feedbackComponent} />
  <h3>从组件获取的反馈数组：</h3>
  {#each feedbackArray as item}
    <p>{item.text} - {item.rate}</p>
  {/each}
</main>

内容的提问来源于stack exchange，提问作者xoxoen21