본문 바로가기

개발하자

Svelte에서 소품을 선택 사항으로 선언할 수 있는 방법이 있나요

반응형

Svelte에서 소품을 선택 사항으로 선언할 수 있는 방법이 있나요

나는 다음과 같은 옵션 프로프를 사용하는 구성 요소를 만들었다. 나의 문제는 프로프를 통과하지 못할 때 항상 이러한 성가신 오류 메시지가 콘솔에 쇄도한다는 것이다:

<MyComponent> was created without expected prop 'hide'

소품을 선택 사항으로 선언할 수 있는 방법이 있나요?




기본값을 지정하면 됩니다.

MyComponent.svelt

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

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

앱.svelte

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

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

따라서 이 경우 로 변경합니다.




기본값을 원하지 않는 경우도 있으므로 기본값으로 설정하는 것이 좋습니다.

MyComponent.svelt

<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>

반응형