gpt4 book ai didi

javascript - 如何在 Svelte 中使用 Web 组件?

转载 作者:行者123 更新时间:2023-12-05 04:33:52 32 4
gpt4 key购买 nike

我想使用 https://github.com/microsoft/vscode-webview-ui-toolkit 中的几个 Web 组件.但我不知道如何在 Svelte 中使用它们,因为 Svelte 将 Web 组件视为 Svelte 组件。

当我尝试使用它们时,

<script lang="ts">
import { Button } from "@vscode/webview-ui-toolkit"
</script>

<main>
<Button appearance="primary">Text</Button>
</main>

我收到这个错误,

Element does not support attributes because type definitions are missing for this Svelte Component or element cannot be used as such.

Underlying error:
JSX element class does not support attributes because it does not have a '$$prop_def' property.ts(2607)
'Button' cannot be used as a JSX component.
Its instance type 'Button' is not a valid JSX element.
Property '$$prop_def' is missing in type 'Button' but required in type 'ElementClass'.

Possible causes:
- You use the instance type of a component where you should use the constructor type
- Type definitions are missing for this Svelte Component. If you are using Svelte 3.31+, use SvelteComponentTyped to add a definition:
import type { SvelteComponentTyped } from "svelte";
class ComponentName extends SvelteComponentTyped<{propertyName: string;}> {}ts(2786)

最佳答案

Button是自定义元素类,不应像 Svelte 组件那样使用。您需要改用自定义元素标签,在本例中为 <vscode-button> .

<main>
<vscode-button appearance="primary">Text</vscode-button>
</main>

您可能需要进行额外的设置才能初始化 Web 组件 - 我对这个库不熟悉。

关于javascript - 如何在 Svelte 中使用 Web 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71304201/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com