以下内容均以中英双语为例:
1.多语言文本
// 中文文本路径:src/localse/zh/excemple.ts
export default {
"main.excemple.1": "示例1", // 根据实际内容命名,冒号后是文本内容
"main.excemple.2": "示例2",
"main.excemple.3": "示例3"
}
// 英文文本路径:src/localse/en/excemple.ts
export default {
"main.excemple.1": "excemple 1",
"main.excemple.2": "excemple 2",
"main.excemple.3": "excemple 3"
}
可以根据不同页面创建对应的ts文件
2.导出文本文件
有多个ts文件时可以一并导出
// 中午文本路径:src/localse/zh-CN.ts
import excemple from "./zh/excemple"
import anotherExcemple from "./zh/anotherExcemple"
export default {
...excemple,
...anotherExcemple
}
// 英文文本路径:src/localse/en-US.ts
import excemple from "./en/excemple"
import anotherExcemple from "./en/anotherExcemple"
export default {
...excemple,
...anotherExcemple
}
3.切换多语言文本
多语言切换器
// CountrySelect.ts
import { Select } from "antd"
import { useIntl } from "umi"
interface Props {
handlechange: (val: string) => void
defaultValue?: string | null | undefined
disabled?: boolean
}
const options = [
{ value: "zh-CN", label: "中文|简体" },
{ value: "en-US", label: "English" }
]
const CountrySelect = ({ handlechange, defaultValue, disabled }: Props) => {
const intl = useIntl()
const lang = intl.locale || "zh-CN"
return (
<div>
<Select defaultValue={defaultValue ?? lang} onChange={handlechange} options={options} disabled={disabled} showArrow={false} />
{/* 国际化切换中英文的select选择器下方的选择器向下箭头会显示错位,所以暂时把箭头先去掉了 showArrow={false}*/}
</div>
)
}
export default CountrySelect
返回显示当前语言的切换器
// SetLocal.ts
import { useIntl, setLocale } from "umi"
import CountrySelect from "@/CountrySelect.ts"
const SetLocal = () => {
const intl = useIntl()
const lang = intl.locale || "zh-CN"
const handlechange = (val: string) => setLocale(val, false)
return <CountrySelect defaultValue={lang} handlechange={handlechange} />
}
export default SetLocal
引入切换器组件时直接用 SetLocal
3.使用多语言文本
import { useIntl } from "umi"
const MainPage: React.FC = () => {
const { formatMessage } = useIntl()
return (
<>
<span>{formatMessage({ id: 'main.excemple.1' })}</span> // 根据选择显示“示例1”或“excemple 1”
</>
)
}
export default MainPage