React/JS中如何在单个声明中定义多个关联常量？

我是React/JS新手，想根据系统变量landesvariante设置几个变量，这些变量在实例中应该是不可修改的常量。目前的写法能运行，但在函数内部给外部变量赋值的方式很别扭，而且没法把footerWidth和footerAltText声明为常量（必须先声明再赋值）。

当前组件使用代码：

<Box
    as='img'
    width={footerWidth}
    justifyContent='center'
    alignContent='center'
    src={footerLogoSource}
    alt={footerAltText}
/>

当前features.ts的实现：

export let footerWidth: string
export let footerAltText: string
export const footerLogoSource: string =
  getAppConfig().contextPath +
  (() => {
    switch (getAppConfig().landesvariante) {
      case Variante.SN:
        footerWidth = '30%'
        footerAltText = 'lorem ipsum'
        return '/assets/kofin_eu_logo.svg'
      case Variante.BB:
        footerWidth = '20%'
        footerAltText = 'lorem ipsum 2'
        return '/assets/logo_bb.svg'
      default:
        return null
    }
  })()

不想给每个变量单独写switch-case（会重复代码），求合适的实现方式。

优化方案：用配置映射表统一管理 #

把不同变体对应的所有参数整理成一个配置对象，通过landesvariante直接匹配对应的配置项，这样所有变量都能声明为常量，也避免了重复的switch逻辑。

修改后的features.ts：

// 定义各变体的配置映射表
const footerConfigMap = {
  [Variante.SN]: {
    width: '30%',
    altText: 'lorem ipsum',
    logoPath: '/assets/kofin_eu_logo.svg'
  },
  [Variante.BB]: {
    width: '20%',
    altText: 'lorem ipsum 2',
    logoPath: '/assets/logo_bb.svg'
  }
}

// 获取当前系统对应的配置，兜底空对象避免报错
const currentConfig = footerConfigMap[getAppConfig().landesvariante] || {};
const contextPath = getAppConfig().contextPath;

// 导出所有常量
export const footerWidth = currentConfig.width || '';
export const footerAltText = currentConfig.altText || '';
export const footerLogoSource = contextPath + (currentConfig.logoPath || '');

进一步优化：封装成函数（可选） #

如果需要复用逻辑或者延迟计算，可以把配置获取封装成函数，让代码更模块化：

const getFooterConfig = () => {
  const contextPath = getAppConfig().contextPath;
  const configMap = {
    [Variante.SN]: {
      width: '30%',
      altText: 'lorem ipsum',
      logoSource: `${contextPath}/assets/kofin_eu_logo.svg`
    },
    [Variante.BB]: {
      width: '20%',
      altText: 'lorem ipsum 2',
      logoSource: `${contextPath}/assets/logo_bb.svg`
    }
  }
  // 兜底默认配置，防止未匹配到变体时出现undefined
  return configMap[getAppConfig().landesvariante] || {
    width: '',
    altText: '',
    logoSource: ''
  };
}

// 解构导出常量
const { width: footerWidth, altText: footerAltText, logoSource: footerLogoSource } = getFooterConfig();
export { footerWidth, footerAltText, footerLogoSource };

这样做的核心优势：

• 所有导出变量都是const常量，完全符合不可修改的要求
• 配置集中管理，新增变体时只需在映射表里添加一项，无重复代码
• 逻辑清晰，避免了立即执行函数修改外部变量的副作用

内容的提问来源于stack exchange，提问作者Peter the Panda