如何使用react_intl将语言文件数据动态导入到我的APP.js中

Question

我需要将index.js中所选语言的数据导入到app.js中

我的index.js

import { IntlProvider, addLocaleData } from 'react-intl'
import en from 'react-intl/locale-data/en'
import fr from 'react-intl/locale-data/fr'
import english from '../popup/localMessages/en'
import french from '../popup/localMessages/fr'
addLocaleData(...en, ...fr)

const locale =
  (navigator.languages && navigator.languages[0]) ||
  navigator.language ||
  navigator.userLanguage ||
  'en-US'

const typeOfLang = {
  en: english,
  fr: french,
}
render(
    <Provider store={store}>
      <IntlProvider locale={locale} messages={typeOfLang[locale]}>
        <Content />
      </IntlProvider>
    </Provider>,
    mountNode
  )

和我的app.js

  class App extends Component {
    render() {
    const { intl } = this.props
    const { locale, messages } = this.props.intl
return(
<Button
              label={intl.formatMessage({ id: 'messages' })}
              onClick={() => this.submit('ALL')}
            />
)
}

还有我的en.js

 import { defineMessages } from 'react-intl'

const english = defineMessages({
  title: {
    id: 'rock',
    defaultMessage: 'read',
  },
  all: {
    id: 'same',
    defaultMessage: 'ALL',
  }


});

export default english

我没有从App.js按钮中的语言文件中获取数据。 您能否在这方面帮助我/请尽可能更正我的代码

Answer 1

您应该将区域设置数据作为数组传递到index.js中：

addLocaleData([...en, ...fr])