개발하자
svelt 조건문에 옵션 _outer_ 태그를 추가할 수 있습니까?
Cuire
2023. 1. 25. 03:30
반응형
svelt 조건문에 옵션 _outer_ 태그를 추가할 수 있습니까?
조건문을 사용하여 내부 내용을 선택적 외부 요소로 감싸는 것이 가능합니까?
다음은 유효한 Svelte에서 수행하고자 하는 작업의 예입니다:
<script>
export let needs_div_wrapper;
</script>
{#if needs_div_wrapper}
<div>
<a>My static content!</a>
</div>
{:else}
<a>My static content!</a>
{/if}
다음은 유효하지 않은 Svelte에서 수행하고자 하는 작업을 보여주는 예입니다:
...
{#if needs_div_wrapper}
<div>
{/if}
<a>My static content!</a>
{#if needs_div_wrapper}
</div>
{/if}
편집: 명확성을 위해, 저는 이것을 내부 콘텐츠의 새로운 구성 요소로 달성하려고 노력하고 있습니다.
아니요, 불가능해요.
이 경우 "상위" 구성 요소에서 잠재적으로 사소한 마크업이 반복되지 않도록 래퍼 구성 요소가 가장 깔끔할 것입니다.
제가 이해하는 바로는, 이미 이 솔루션을 찾으셨지만, 공식적으로 제가 말씀드리는 것은 다음과 같습니다:
DivWrapper.svelte
<script>
export let wrap = false
</script>
{#if wrap}
<div {...$$restProps}>
<slot />
</div>
{:else}
<slot />
{/if}
App.svelte
<script>
import DivWrapper from './DivWrapper.svelte'
export let needs_div_wrapper;
</script>
<DivWrapper wrap={needs_div_wrapper}>
<a>My static content!</a>
</DivWrapper>
반응형