如何将i18n多语言切换按钮改造为下拉菜单？

直接替换你原有的按钮组代码为以下下拉菜单实现即可，逻辑和原按钮保持一致，但交互更简洁：

<div>
  <select 
    value={i18n.resolvedLanguage}
    onChange={(e) => i18n.changeLanguage(e.target.value)}
    style={{ padding: '4px 8px', cursor: 'pointer' }} // 可选：添加基础样式优化视觉
  >
    {Object.keys(lngs).map((lng) => (
      <option key={lng} value={lng}>
        {lngs[lng].nativeName}
      </option>
    ))}
  </select>
</div>

代码说明： #

• 通过value={i18n.resolvedLanguage}绑定当前激活的语言，确保下拉框默认选中用户当前使用的语言
• 监听onChange事件，当用户选择新语言时，通过e.target.value获取选中的语言标识，调用i18n.changeLanguage()完成切换
• 遍历lngs对象生成对应的选项，每个选项的value设为语言标识（如en、zh），显示文本保留原有的nativeName（原生语言名称）

如果需要更复杂的自定义样式（比如美化下拉框外观），可以给<select>和<option>添加自定义className，配合CSS调整样式即可。

内容的提问来源于stack exchange，提问作者Noam TheLoreFnatic Hadad