umi使用useIntl实现页面多语言切换

281 阅读1分钟

以下内容均以中英双语为例:

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 74e9fad3-c4a5-4679-be8c-85e998b026f1.gif

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