通過一個物件中的多個可能值進行映射-React組件 -有解無憂

我目前有一個組件，它接受一個貨幣代碼并回傳相應國家的SVG。我想將該組件擴展到我們想通過國家名稱而不是貨幣代碼進行搜索的情況。目前傳入該組件的道具是：

currencyCode--它是一種貨幣代碼。

currencyCode - 這是類似于 "AED "的東西& countryLabel--類似于 "阿拉伯聯合酋長國"

。

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

const currencyCodeMap = {
  AED: UnitedArabEmirates,
  AFN: Afghanistan,
  ALL: Albania,
  AMD: 亞美尼亞,
  AOA: Angola,
  ARS: Argentina,
  AUD: 澳大利亞,
  AZN: Azerbaijan,
};

型別 Props = {
  currencyCode?: string,
  countryLabel?: string,
  className?: 字串。
};

const CountryFlag = ({ currencyCode, countryLabel, className }: Props) => {
  const FlagComponent = currencyCodeMap[currencyCode] 。

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

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

我試圖將我的currencyCodeMap更新為類似于：

AED |AED |AED

AED | "United Arab Emirates"這樣，標簽或代碼將回傳一個標志，但沒有任何收獲。有什么建議嗎？


uj5u.com熱心網友回復：
AED | "United Arab Emirates" 不是有效的JavaScript語法。
為什么沒有一個物件，如：
type CountryEntry = {
  currencyCode: string,
  countryLabel: string,
  flagComponent: JSX.Element.
}

然后有一個這樣的陣列，使用.find()來獲取組件。
它將看起來像這樣：
 
import Afghanistan from " 。 /CountryFlags/Afghanistan.js"。

型別 Props = {
  currencyCode?: string,
  countryLabel?: string,
  className?: 字串。
};

型別CountryEntry = {
  currencyCode: string,
  countryLabel: string,
  flagComponent: JSX.Element.
}

const flags。CountryEntry[] = [
  { currencyCode: "AFN"/span>, countryLabel: "阿富汗", flagComponent: Afghanistan },
/* ... */
];

const CountryFlag = ({ currencyCode, countryLabel, className }: Props) => {
  const countryEntry = flags.find(
    (f) => f.countryLabel == countryLabel || f.currencyCode == currencyCode
  );

  if (! countryEntry) {
    return < StyledIcon isOberonIcon={true} name={"countryFallback"}。/>。
  } else {
    const FlagComponent = countryEntry.flagComponent;
    
    return (
      <StyledImageWrapper className={className}>/span>
        <FlagComponent />
      </StyledImageWrapper>/span>
    );
};







        
      轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312751.html
      標籤：
      上一篇：合并來自不同物件的具有相同鍵的陣列
下一篇：在NN訓練期間最大化一個損失并最小化另一個損失的正確方法是什么？