React国家旗帜组件如何支持货币代码与国家名称双字段匹配查询

失效原因 #

你之前直接给currencyCodeMap加国家名称作为key不生效，是因为原组件逻辑仅读取currencyCode属性作为查询key，没有处理countryLabel的匹配逻辑，哪怕map里存在对应的key也不会被调用。

可行实现方案 #

提供两种常用实现，你可以根据自己的维护需求选择：

方案1：双映射表方案（改造成本最低，查找效率高）

不需要修改原有currencyCodeMap结构，新增一层国家名称转货币代码的映射即可：

import Afghanistan from "./CountryFlags/Afghanistan.js";
// condensed imports

const currencyCodeMap = {
  AED: UnitedArabEmirates,
  AFN: Afghanistan,
  ALL: Albania,
  AMD: Armenia,
  AOA: Angola,
  ARS: Argentina,
  AUD: Australia,
  AZN: Azerbaijan,
};

// 新增：国家名称转货币代码映射，key统一用小写实现大小写不敏感匹配
const countryLabelToCodeMap: Record<string, string> = {
  "united arab emirates": "AED",
  "afghanistan": "AFN",
  "albania": "ALL",
  "armenia": "AMD",
  "angola": "AOA",
  "argentina": "ARS",
  "australia": "AUD",
  "azerbaijan": "AZN",
  // 补全其余国家映射
}

type Props = {
  currencyCode?: string,
  countryLabel?: string,
  className?: string,
};

const CountryFlag = ({ currencyCode, countryLabel, className }: Props) => {
  // 优先级：currencyCode > countryLabel
  const targetCode = currencyCode 
    || countryLabelToCodeMap[countryLabel?.trim().toLowerCase() || '']
  const FlagComponent = currencyCodeMap[targetCode];

  if (!FlagComponent) {
    return <StyledIcon isOberonIcon={true} name={"countryFallback"} />;
  }

  return (
    <StyledImageWrapper className={className}>
      <FlagComponent />
    </StyledImageWrapper>
  );
};

方案2：统一映射表方案（更易维护，适合后续扩展）

重构为单源数据结构，新增其他查询维度（比如国家二字码、三字码）时不需要新增多套映射，避免数据不同步问题：

import Afghanistan from "./CountryFlags/Afghanistan.js";
// condensed imports

// 统一映射表，单条目维护所有关联信息
const flagEntries = [
  { currencyCode: 'AED', countryLabel: 'United Arab Emirates', component: UnitedArabEmirates },
  { currencyCode: 'AFN', countryLabel: 'Afghanistan', component: Afghanistan },
  { currencyCode: 'ALL', countryLabel: 'Albania', component: Albania },
  { currencyCode: 'AMD', countryLabel: 'Armenia', component: Armenia },
  { currencyCode: 'AOA', countryLabel: 'Angola', component: Angola },
  { currencyCode: 'ARS', countryLabel: 'Argentina', component: Argentina },
  { currencyCode: 'AUD', countryLabel: 'Australia', component: Australia },
  { currencyCode: 'AZN', countryLabel: 'Azerbaijan', component: Azerbaijan },
  // 补全其余国家映射
]

type Props = {
  currencyCode?: string,
  countryLabel?: string,
  className?: string,
};

const CountryFlag = ({ currencyCode, countryLabel, className }: Props) => {
  // 优先匹配currencyCode，其次匹配countryLabel
  const matchedEntry = flagEntries.find(entry => {
    if (currencyCode) return entry.currencyCode === currencyCode.trim()
    if (countryLabel) return entry.countryLabel.toLowerCase() === countryLabel.trim().toLowerCase()
    return false
  })
  const FlagComponent = matchedEntry?.component

  if (!FlagComponent) {
    return <StyledIcon isOberonIcon={true} name={"countryFallback"} />;
  }

  return (
    <StyledImageWrapper className={className}>
      <FlagComponent />
    </StyledImageWrapper>
  );
};

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