Svelte中焦点/失焦状态下如何实现Logo图片切换？

核心思路 #

统一频道码与Logo组件的映射结构，让每个映射项都包含焦点、失焦两种状态对应的组件（无需区分单/双版本Logo），然后通过状态参数直接获取对应组件，避免冗余分支判断。

方案一：使用对象结构（可读性更强） #

修改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'

// 定义类型规范映射结构
type LogoConfig = {
  focused: typeof Logo1;
  unfocused: typeof Logo1;
};

const channelLogoMap = new Map<Television_ChannelCode, LogoConfig>();

// 无状态区分的Logo：两个字段指向同一组件
channelLogoMap.set(Television_ChannelCode.News, {
  focused: Logo1,
  unfocused: Logo1
});

// 有状态区分的Logo：分别绑定焦点/失焦组件
channelLogoMap.set(Television_ChannelCode.Sports, {
  focused: Logo2F,
  unfocused: Logo2U
});

// 修改获取函数，增加状态参数
export const getLogoFromChannelCode = (
  channelCode: Television_ChannelCode,
  isFocused: boolean
): typeof Logo1 => {
  const logoConfig = channelLogoMap.get(channelCode);
  if (!logoConfig) throw new Error(`未找到频道[${channelCode}]对应的Logo`);
  return isFocused ? logoConfig.focused : logoConfig.unfocused;
};

修改Svelte组件模板，简化逻辑并统一样式处理：

<!-- 用条件类替代冗余的#if分支 -->
<div class:focused={hasFocus} class="base-logo-container">
  <svelte:component this={getLogoFromChannelCode(channelCode, hasFocus)} />
</div>

<style>
  .base-logo-container {
    /* 基础样式，通用部分 */
  }
  .focused {
    /* 焦点状态专属样式，覆盖基础样式 */
  }
</style>

方案二：使用数组结构（符合你最初的想法） #

如果偏好数组存储，可按索引对应状态（比如索引0=失焦，1=焦点）：

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

// 数组索引：0=失焦，1=焦点
type LogoPair = [typeof Logo1, typeof Logo1];

const channelLogoMap = new Map<Television_ChannelCode, LogoPair>();

channelLogoMap.set(Television_ChannelCode.News, [Logo1, Logo1]);
channelLogoMap.set(Television_ChannelCode.Sports, [Logo2U, Logo2F]);

export const getLogoFromChannelCode = (
  channelCode: Television_ChannelCode,
  isFocused: boolean
): typeof Logo1 => {
  const logoPair = channelLogoMap.get(channelCode);
  if (!logoPair) throw new Error(`未找到频道[${channelCode}]对应的Logo`);
  return logoPair[isFocused ? 1 : 0];
};

Svelte模板部分与方案一完全一致，调用时传入hasFocus状态即可。

优势说明 #

• 统一映射结构：新增频道时无需区分单/双版本Logo，直接遵循相同格式即可，降低维护成本。
• 逻辑简洁：通过状态参数直接获取对应组件，避免大量if/switch分支。
• 样式优化：用条件类替代冗余的DOM结构重复，代码更紧凑。

内容的提问来源于stack exchange，提问作者lache