主页 / coding / 问题 / 79138648
Accepted
Clifton Labrum
Asked: 2024-10-30 03:15:40 +0800 CST

Svelte 5 中作为 Props 传递的组件的类型

  • 772

假设我有一个名为的父组件SplitView.svelte：

<script lang="ts">
  import type { Snippet } from 'svelte'
  
  type Props = {
    master: Snippet
    detail: Snippet
  }
  let { master, detail }: Props = $props()
</script>

<div class="split">
  <div id="master">
    {@render master()}
  </div>
  <div id="detail">
    {@render detail()}
  </div>
</div>

我在其他地方使用过这样的方法：

<script lang="ts">
  import SplitView from '$lib/components/shared/SplitView.svelte'
  import Master from './master/PricingMaster.svelte'
  import Detail from './detail/PricingDetail.svelte'
</script>

<SplitView master={Master} detail={Detail} /> <-- ESLint error

我在master和detail属性上遇到了一个 linter 错误：

Type '__sveltets_2_IsomorphicComponent<Record<string, never>, 
{ [evt: string]: CustomEvent<any>; }, {}, {}, string>' is not assignable to type 'Snippet<[]>'.

Target signature provides too few arguments. Expected 2 or more, but got 0.ts(2322)

作为 props 发送的组件是否不是类型Snippet？我做错了什么？

svelte

1 个回答

  1. Best Answer

    组件的类型应该Component在 Svelte 5 中，您只需用大写首字母传递它，以便可以直接在 SplitView 上呈现它：

    //SplitView.svelte
<script lang="ts">
  import type { Component } from 'svelte'

    type Props = {
    Master: Component
    Detail: Component
  }
  
  let { Master, Detail }= $props()
</script>

<div class="split">
  <div id="master">
        <Master />
  </div>
  <div id="detail">
        <Detail />
  </div>
</div>

    像这样使用：

    <script lang="ts">
  import SplitView from './SplitView.svelte'
  import MyMaster from './PricingMaster.svelte'
  import Detail from './PricingDetail.svelte'

  // Name your components, Master and Detail to simplify the Props
</script>
  <!-- or use Master={MasterName} Detail={DetailName} 
  to pass components with different component names -->
<SplitView Master={MyMaster} {Detail} />
    • 2

相关问题