以苗条的方式切换对焦/未对焦时的图像

Question

我有一个svelte应用程序，我在其中将频道代码映射到导入的徽标，并在处于聚焦或未聚焦状态的div中渲染该徽标。目前，我已经映射了1个图像，并有条件地更改了徽标(SVG(的CSS。但我觉得在有焦点和无焦点的标志图像之间切换有点老套，更有意义。元素的样式我可以更改，但我不知道如何通过映射切换图像(我想避免长if语句或切换大小写，因为可能有很多徽标(。

如何在两个图像之间切换？如果需要更多信息，请告诉我。(我想的一个想法是两个图像的数组，我以某种方式输入索引0或1(

TS文件

import { Television_ChannelCode } from '@gql/schema';
import Logo1 from '@logos/Logo1.svelte';
import Logo2F from '@logos/Logo2F.svelte';
import Logo2U from '@logos/Logo2U.svelte'

const map = new Map<Television_ChannelCode, any>();
map.set(Television_ChannelCode.News, Logo1);
//I want to switch between 2, use array?//
map.set(Television_ChannelCode.Sports, [Logo2F, Logo2U]);
export const getLogoFromTelevisionChannelCode = (
televisionChannelCode: Television_ChannelCode,
): any => {
return map.get(televisionChannelCode);
};

SVELTE文件<---可以更改样式，但如何交换图像？？

{#if hasFocus}
<div class={focusedStyle}>
<svelte:component this={getLogoFromTelevisionChannelCode(channelCode)}/>
</div>
{:else}
<div class="unfocusedStyle">
<svelte:component this={getLogoFromTelevisionChannelCode(channelCode)}/>
</div>
{/if}

Answer 1

在您的示例中，可以通过组合类来避免if块

<div class={hasFocus ? 'focusedStyle' : 'unfocusedStyle'}>
<svelte:component this={getLogoFromTelevisionChannelCode(channelCode)}/>
</div>

你的阵列方法可以像一样工作

<div>
<svelte:component this={getLogoFromTelevisionChannelCode(channelCode)[hasFocus ? 0 : 1]}/>
</div>

(如果每个通道都有两个版本的数组(，但我认为更好的方法是坚持每个Logo版本一个组件，处理样式实习生并从组件导出hasFocus标志，这样它就可以看起来像这个

<svelte:component this={getLogoFromTelevisionChannelCode(channelCode)} {hasFocus}/>