You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
28 lines
862 B
React
28 lines
862 B
React
2 years ago
|
import React, { useState } from 'react';
|
||
|
|
import { Dropdown, Menu } from 'antd';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 语言选择组件
|
||
|
|
*/
|
||
|
|
const Language = () => {
|
||
|
|
const { t, i18n } = useTranslation();
|
||
|
|
const [selectedKeys, setSelectedKeys] = useState([i18n.language]);
|
||
|
|
// 切换语言事件
|
||
|
|
const handleChangeLanguage = ({ key }) => {
|
||
|
|
setSelectedKeys([key]);
|
||
|
|
i18n.changeLanguage(key);
|
||
|
|
};
|
||
|
|
|
||
|
|
const langSupports = ['en', 'zh'].map((lang) => ({ label: t(`lang.${lang}`), key: lang }));
|
||
|
|
|
||
|
|
/* 🌏🌐 */
|
||
|
|
return (
|
||
|
|
<Dropdown menu={{ items: langSupports, onClick: handleChangeLanguage, style: { width: 100 }, selectedKeys: selectedKeys }}>
|
||
|
|
<div className='icon'>🌐<span style={{color: '#00b96b'}}>{t(`lang.${i18n.language}`)}</span></div>
|
||
|
|
</Dropdown>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Language;
|