import React from 'react' ; import { getLocale , setLocale } from 'umi' ; import classNames from 'classnames' ; import { Menu , Dropdown } from 'antd' ; import { GlobalOutlined } from '@ant-design/icons' ; import styles from './index.less' ; interface SelectLangProps { className ? : string ; } const SelectLang = props => { const { className } = props ; const selectedLang = getLocale ( ) ; const changeLang = ( { key } ) : void => setLocale ( key ) ; const locales = [ 'zh-CN' , 'zh-TW' , 'en-US' ] ; const languageLabels = { 'zh-CN' : '简体中文' , 'zh-TW' : '繁体中文' , 'en-US' : 'English' , } ; const languageIcons = { 'zh-CN' : '🇨🇳' , 'zh-TW' : '🇭🇰' , 'en-US' : '🇺🇸' , } ; const langMenu = ( < Menu className = { styles . menu } selectedKeys = { [ selectedLang ] } onClick = { changeLang } > { locales . map ( locale => ( < Menu . Item key = { locale } > < span role = "img" aria - label = { languageLabels [ locale ] } > { languageIcons [ locale ] } < /span>{' '} { languageLabels [ locale ] } < /Menu.Item>))} < /Menu>); return ( < Dropdown overlay = { langMenu } > < span className = { classNames ( styles . dropDown , className ) } > < GlobalOutlined title = "语言" / > < /span> < /Dropdown>); } ; export default SelectLang ;