reactjs – React-intl多语言应用程序：更改语言和翻译存储

为了改变语言,我使用了here提供的解决方案,它基本上将IntlProvider绑定到具有Connect功能的ReduxStore.另外,不要忘记在语言更改时包含重新呈现组件的键.这基本上都是所有代码：

这是ConnectedIntlProvider.js,只是绑定默认的IntlProvider(注意github上原始注释中缺少的关键prop)

import { connect } from 'react-redux';
import { IntlProvider } from 'react-intl';

// This function will map the current redux state to the props for the component that it is "connected" to.
// When the state of the redux store changes,this function will be called,if the props that come out of
// this function are different,then the component that is wrapped is re-rendered.
function mapStateToProps(state) {
  const { lang,messages } = state.locales;
  return { locale: lang,key: lang,messages };
}

export default connect(mapStateToProps)(IntlProvider);

然后在您的入口点文件中：

// index.js (your top-level file)

import ConnectedIntlProvider from 'ConnectedIntlProvider';

const store = applyMiddleware(thunkMiddleware)(createStore)(reducers);

ReactDOM.render((
  <Provider store={store}>
    <ConnectedIntlProvider>
      <Router history={createHistory()}>{routes}</Router>
    </ConnectedIntlProvider>
  </Provider>
),document.getElementById( APP_DOM_CONTAINER ));

接下来要做的就是实现reducer来管理语言环境,并让动作创建者按需更改语言.

至于存储翻译的最佳方式 – 我发现很多关于这个主题的讨论和情况似乎很混乱,老实说,我很反感,react-intl的制作者如此关注日期和数字格式而忘记翻译.所以,我不知道处理它的绝对正确的方法,但这就是我所做的：

创建文件夹“locales”并在里面创建一堆文件,如“en.js”,“fi.js”,“ru.js”等.基本上所有使用的语言.
在每个文件中导出json对象,其翻译如下：

export const ENGLISH_STATE = {
  lang: 'en',messages: {
      'app.header.title': 'Awesome site','app.header.subtitle': 'check it out','app.header.about': 'About','app.header.services': 'services','app.header.shipping': 'Shipping & Payment',}
}

其他文件具有完全相同的结构,但内部已翻译字符串.然后在负责语言更改的reducer中导入这些文件中的所有状态,并在调度更改语言的操作后立即将它们加载到redux存储中.在上一步中创建的组件会将更改传播到IntlProvider,并且将发生新的区域设置.使用< FormattedMessage>在页面上输出它或者intl.formatMessage({id：’app.header.title’})},在他们的github wiki上阅读更多内容.他们在那里有一些DefineMessages功能,但说实话,我找不到任何好的信息如何使用它,基本上你可以忘记它并且没问题.