reactjs - Kan inte läsa den flera språkfilen i React Intl + TypeScript

Jag skulle vilja använda react intl för att stödja flera språk. Jag är säker på att jag har filen uppsatt, men den laddas inte ordentligt och visar inte texten jag har ställt in i yaml.

Jag får ett felmeddelande som säger att inläsningen misslyckas. Vad är fel?

Felet:

Fel: [@formatjs/intl Error MISSING_TRANSLATION] Saknas meddelande: "Top.Title" för lokal "en-US", använder id som reserv.

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'),
)

lokaler/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
  }
}

hej.js

import { FormattedMessage } from 'react-intl'

<FormattedMessage id="Top.Title" />

Svar #1

I React-intl, om du vill behålla din översättning i ett objektformat, dvs.

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

Du bör alltid platta ut dina nycklar och hålla dem på bara ett nivå:

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

För att uppnå detta kan du använda flatten-biblioteket, vilket hjälper till att automatiskt platta ut dina objektnycklar till endast ett nivå.

Jag har lagt in din kod i denna sandbox och visar hur du kan platta ut din översättning och lösa ditt problem: https://codesandbox.io/s/react-intl-64409927-zljmf

Förresten kan du använda hooken "useIntl" som tillhandahålls av react-intl, vilket kan ge åtkomst till olika metoder i react-intl enklare (och hålla din kod renare/lättare att läsa).

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