React中实现带国旗图标的语言切换下拉菜单

我正在React作品集首页开发一个语言切换下拉组件，需要实现网站文本在英语和意大利语之间切换，下拉菜单要包含“EN”“IT”选项及对应国旗图标。目前已通过<select>元素实现基础切换功能，但不知道如何为选项添加国旗图标，以下是当前代码、效果说明及上下文代码：

当前组件代码 #

import React, { useContext } from "react";
import { languageOptions } from "../languages";
import { LanguageContext } from "../container/Language";

export default function LanguageSelector() {
  const { userLanguage, userLanguageChange } = useContext(LanguageContext);

  const handleLanguageChange = (e) => userLanguageChange(e.target.value);
  return (
    <select
      onChange={handleLanguageChange}
      value={userLanguage}
    >
      {Object.entries(languageOptions).map(([id, name]) => (
        <option key={id} value={id}>
          {name}
        </option>
      ))}
    </select>
  );
}

效果对比 #

• 现有效果：原生<select>下拉框，仅显示“EN”“IT”纯文字选项
• 期望效果：每个语言选项左侧带有对应国家国旗图标，右侧显示“EN”“IT”文字的自定义样式下拉菜单

上下文代码 #

LanguageContext代码 #

import React, { useState, createContext, useContext } from "react";
import { languageOptions, dictionaryList } from "../languages";

export const LanguageContext = createContext({
  userLanguage: "en",
  dictionary: dictionaryList.en,
});

export function LanguageProvider({ children }) {
  const defaultLanguage = window.localStorage.getItem("rcml-lang");
  const [userLanguage, setUserLanguage] = useState(defaultLanguage || "en");

  const provider = {
    userLanguage,
    dictionary: dictionaryList[userLanguage],
    userLanguageChange: (selected) => {
      const newLanguage = languageOptions[selected] ? selected : "en";
      setUserLanguage(newLanguage);
      window.localStorage.setItem("rcml-lang", newLanguage);
    },
  };

  return (
    <LanguageContext.Provider value={provider}>
      {children}
    </LanguageContext.Provider>
  );
}

export function Text({ tid }) {
  const languageContext = useContext(LanguageContext);

  return languageContext.dictionary[tid] || tid;
}

languageOptions代码 #

import en from "./en.json";
import it from "./it.json";

export const dictionaryList = { en, it };

export const languageOptions = {
  en: "EN",
  it: "IT",
};

解决方案 #

原生<select>无法直接在<option>中插入图标，因此需要自定义下拉组件实现需求，下面是两种可行方案：

方案一：使用国旗CSS类库（推荐） #

借助flag-icon-css库快速实现国旗图标，无需自己准备图片资源：

1. 安装依赖

npm install flag-icon-css

2. 修改languageOptions配置
   扩展配置项，增加国旗对应的CSS类名：

import en from "./en.json";
import it from "./it.json";

export const dictionaryList = { en, it };

export const languageOptions = {
  en: { label: "EN", flagClass: "flag-icon flag-icon-gb" },
  it: { label: "IT", flagClass: "flag-icon flag-icon-it" },
};

3. 自定义下拉组件

import React, { useContext, useState } from "react";
import { languageOptions } from "../languages";
import { LanguageContext } from "../container/Language";
import 'flag-icon-css/css/flag-icon.min.css';

export default function LanguageSelector() {
  const { userLanguage, userLanguageChange } = useContext(LanguageContext);
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  const handleSelectLanguage = (langId) => {
    userLanguageChange(langId);
    setIsDropdownOpen(false);
  };

  const currentLang = languageOptions[userLanguage];

  return (
    <div className="language-selector">
      {/* 下拉触发按钮 */}
      <button 
        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
        className="selector-btn"
      >
        <span className={currentLang.flagClass}></span>
        <span>{currentLang.label}</span>
        <span className="dropdown-arrow">{isDropdownOpen ? '▲' : '▼'}</span>
      </button>
      {/* 下拉菜单 */}
      {isDropdownOpen && (
        <div className="dropdown-menu">
          {Object.entries(languageOptions).map(([id, lang]) => (
            <div
              key={id}
              onClick={() => handleSelectLanguage(id)}
              className={`menu-item ${userLanguage === id ? 'active' : ''}`}
            >
              <span className={lang.flagClass}></span>
              <span>{lang.label}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

4. 添加基础样式

.language-selector {
  position: relative;
  display: inline-block;
}

.selector-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}

.flag-icon {
  width: 20px;
  height: 14px;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  border: 1px solid #e0e0e0;
  border-radius: 0 0 4px 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 100;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.menu-item:hover, .menu-item.active {
  background-color: #f5f5f5;
}

方案二：使用本地国旗图片 #

如果不想依赖第三方库，可以自己准备国旗图片并导入使用：

1. 修改languageOptions配置

import en from "./en.json";
import it from "./it.json";
import enFlag from '../assets/flags/en.png'; // 替换为你的图片路径
import itFlag from '../assets/flags/it.png';

export const dictionaryList = { en, it };

export const languageOptions = {
  en: { label: "EN", flagSrc: enFlag },
  it: { label: "IT", flagSrc: itFlag },
};

2. 调整组件中的图标渲染
   将方案一中的<span className={lang.flagClass}></span>替换为：

<img src={lang.flagSrc} alt={lang.label} width="20" height="14" />

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