Question

试图了解可写和可读存储在Svelte中的工作方式。因此，尝试在codeandbox.io上复制https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores中描述的警报组件的最低版本。

但是，我收到一个错误：TypeError _Alert.Alert不是构造函数

codesandbox代码位于https://codesandbox.io/s/error-stackoverflow-tour1?file=/App.svelte

这些是相关文件的内容：

index.js

import App from "./App.svelte";

const app = new App({
  target: document.body
});

export default app;

App.svelte

<script>
  import { Alert } from "./Alert.svelte";
</script>
<main>
  <Alert />
</main>

Alert.svelte

<script>
  import { alertStore } from "./stores.js";
  import { onDestroy } from "svelte";

  let alertContent = "";

  const unsubscribe = alertStore.subscribe(value => (alertContent = value));

  onDestroy(unsubscribe);
</script>

{#if alertContent}
<div on:click={() => alertContent = ""}>
  <p> {alertContent} </p>
</div>
{/if}

stores.js

import { writable } from "svelte/store";

export const alertStore = writable("Welcome to the to-do list app!");

谁能看到导致错误的原因。

Answer 1

看起来您需要继续学习本教程，但您仍在使用样板的订阅/取消订阅方法，因为存在自动订阅，因此在Svelte应用程序中从未使用过这种方法。

当前出现错误的原因是App.svelte中的这一行import { Alert } from "./Alert.svelte";。

在Svelte中导入组件时，无需将名称包装在方括号中。应该是import Alert from "./Alert.svelte";，然后在标记中像这样<Alert />一样使用它。

为什么Codesandbox.io上的Svelte应用程序导致TypeError ...不是构造函数？

1 个答案: