无法读取 React Intl + TypeScript 中的多个 lang 文件答案

【问题标题】：Can't read the multiple lang file in React Intl + TypeScript无法读取 React Intl + TypeScript 中的多个 lang 文件
【发布时间】：2021-02-01 04:50:36
【问题描述】：

我想使用react intl 来支持多种语言。我确定我已经设置了文件，但它没有正确加载并且没有显示我在 yaml 中设置的文本。

我收到一条错误消息，指出加载失败。怎么了？

错误：

错误：[@formatjs/intl Error MISSING_TRANSLATION] 缺少消息：区域设置“en-US”的“Top.Title”，使用 id 作为后备。

index.tsx

import { IntlProvider } from 'react-intl'
import { chooseLocale } from './locales'

const lang = navigator.language

ReactDOM.render(
  <React.StrictMode>
    <IntlProvider locale={lang} messages={chooseLocale(lang)}>
      <App />
    </IntlProvider>
  </React.StrictMode>,
  document.getElementById('root'),
)

locales/index.ts

import yaml from 'js-yaml'

const en = yaml.load(`
Top:
  Title: Sample Title
  Message: Hello! { name }!
`)

const translationMessages = {
  en,
}

export const chooseLocale = (locale: string) => {
  console.log('Your locale :', locale)
  switch (locale) {
    case 'en-GB':
      return translationMessages.en
    default:
      return translationMessages.en
  }
}

hello.js

import { FormattedMessage } from 'react-intl'

<FormattedMessage id="Top.Title" />

【问题讨论】：

标签： reactjs typescript react-intl

【解决方案1】：

在 React-intl 中，如果您希望将翻译保持为对象格式，即

{ "Top":
  { "Title": "Sample Title" },
  { "Message": "Hello! { name }!" }
}

您应该始终展平您的密钥并将其保持在一个级别：

{
  "Top.Title": "Sample Title",
  "Top.Message": "Hello! { name }!" }
}

要实现这一点，您可以使用flatten 库，它有助于将您的对象键自动扁平化为一层。

我已将您的代码放入此沙箱中，并展示如何使您的翻译变平并解决您的问题： https://codesandbox.io/s/react-intl-64409927-zljmf

顺便说一句，你可以使用 react-intl 提供的钩子“useIntl”，它可以更容易地访问 react-intl 中的不同方法（并保持你的代码更清晰/可读）。

 const intl = useIntl();
 return (<p>{intl.formatMessage({ id: "Top.Message" }, { name: "Apple" })}</p>)

【讨论】：