如何根据当前语言显示不同的组件（React / i18n）

Question

谁能告诉我为什么这段代码不起作用？

编辑：我不能使用 Keys，因为我想格式化文本。

VSC 显示此错误： 类型“ITranslationContext”上不存在属性“匹配”。 ts(2339)

export const Preparation = () => {
  const i18n = useTranslation()
  const locale = i18n.match(["de", "fr", "it"])

  switch (locale) {
    case "de":
      return <PreparationGerman />
    case "fr":
      return <PreparationFrench />
    case "it":
      return <PreparationItalian />
  }
  return <PreparationEnglish />
}


const PreparationGerman = () => (
    <h1>German</h1>
)

const PreparationFrench = () => (
    <h1>French</h1>
)

const PreparationItalian = () => (
    <h1>Italian</h1>
)

const PreparationEnglish = () => (
    <h1>English</h1>
)

Answer 1

match() 方法在 string 中搜索与正则表达式的匹配项，并将匹配项作为 Array 对象返回。

请查看i18n的文档以获取合适的方法。

但是，您不需要创建单独的组件。相反，为所有语言创建一个键（比如lang）并使用它来显示组件内的语言。

 <h1>{i18n.translate('lang')}</h1>

编辑：

i18n 是一个包含 locale 属性的对象。

将语言环境定义更新为：

const {locale} = i18n;