React - country-flag-icons 庫的動態使用

Question

我們正在使用https://www.npmjs.com/package/country-flag-icons庫，它允許以這種方式在 React 中使用標志圖標：

import Flags from 'country-flag-icons/react/3x2'

<Flags.US title="United States" className="..."/>

但是我怎樣才能動態使用它呢？ 因為 State 代碼是通過服務返回的。

我的意思是這樣的一些解決方案：

<Flags.{myVar} title="United States" className="..."/>

編輯這是我的文件：

import { Link } from "react-router-dom";
import Flags from "country-flag-icons/react/3x2";

const Person = ({ linkDetail, flagNationCode }) => (
  <Link to={linkDetail}>
   
    <div className="person-footer">
      <div className="info">
        <div className="label">{flagNationCode}</div>
        <div className="value">
            <Flags.US />
          )}
        </div>
      </div>
    </div>
  </Link>
);

export default Person;

Answer 1

您需要將組件選擇為以大寫字母開頭的變量並將其用作組件，例如：

const Person = ({ linkDetail, flagNationCode }) => {
  const Flag = Flags[flagNationCode];

  return (
    <Link to={linkDetail}>
      <div className="person-footer">
        <div className="info">
          <div className="label">{flagNationCode}</div>
          <div className="value">
            <Flag />
          </div>
        </div>
      </div>
    </Link>
  );
};

Answer 2

您可以將所需的標志拉出到變量中，然后將其用作組件

import { Link } from "react-router-dom";
import Flags from "country-flag-icons/react/3x2";

const Person = ({ linkDetail, flagNationCode }) => {
const Flag = Flags[flagNationCode];
return (
  <Link to={linkDetail}>
    <div className="person-footer">
      <div className="info">
        <div className="label">{flagNationCode}</div>
        <div className="value">
            <Flag />
        </div>
      </div>
    </div>
  </Link>
)};

export default Person;

Answer 3

對於任何有問題的人： Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

嘗試這個

import { Link } from "react-router-dom";
import Flags from "country-flag-icons/react/3x2";

const Person = ({ linkDetail, flagNationCode }) => {

const obj: Record<string, FlagComponent> = Flags;
const Flag = Flags[flagNationCode];
return (
  <Link to={linkDetail}>
    <div className="person-footer">
      <div className="info">
        <div className="label">{flagNationCode}</div>
        <div className="value">
            <Flag />
        </div>
      </div>
    </div>
  </Link>
)};

export default Person;

添加此轉換const obj: Record<string, FlagComponent> = Flags; 為我工作