如何使用 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])

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

how to dynamically import languages files data into my APP.js using react_intl

javascript

reactjs

react-intl

react-redux

babel-plugin-react-intl