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

时间:2018-04-11 09:46:51

标签: javascript reactjs react-redux react-intl babel-plugin-react-intl

我需要将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按钮中的langauges文件中获取数据。如果可能的话,你能帮助我/纠正我的代码

1 个答案:

答案 0 :(得分:0)

您应该将您的语言环境数据作为数组传递到index.js:

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