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

Question

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

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

VSC 显示此错误：属性 'match' 在类型 '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 中搜索与正则表达式的匹配项，以及 returns 匹配项，作为数组对象。

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

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

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

编辑:

i18n 是包含语言环境的对象属性。

将语言环境定义更新为：

const {locale} = i18n;

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

How can I show a different component based on the current language (React / i18n)

internationalization

reactjs