有没有办法在 Svelte 中将 props 声明为可选

Question

我创建了一些带有可选道具的组件，例如hide={true}. 我的问题是，当我不通过该道具时，这些烦人的错误消息总是会淹没我的控制台：

<MyComponent> was created without expected prop 'hide'

有没有办法将道具声明为可选？

Answer 1

在某些情况下，您不需要默认值，因此最好使用默认值null。

MyComponent.svelte

<script>
  export let myProp = null // Default value is null
</script>

<div class:has-some-prop={myProp}>
{#if myProp }
Has Prop: {myProp}
{:else}
No Prop
{/if}
</div>

应用程序.svelte

<MyComponent/>
<MyComponent myProp='yep'/>

结果

<div>No Prop</div>

<div class:has-some-prop>
Has Prop<span>yep</span>
</div>

Answer 2

只需给他们一个默认值。

MyComponent.svelte

<script>
  export let i = 123 // Default value is now 123
</script>

<!-- Output is "i = 123" -->
<p>i = {i}</p>

App.svelte

<script>
    import MyComponent from './MyComponent.svelte'
</script>

<!-- No error here! -->
<MyComponent/>

因此，在您的情况下，您将更export let hide改为export let hide = false.