react 国际化的实现代码示例(3)

import React from 'react'; import { render } from 'react-dom'; import { Provider } from 'react-redux'; import rootReducer from './common/redux/reducers'; import { configureStore } from './common/redux/store'; import { Router } from 'react-router-dom'; import createBrowserHistory from 'history/createBrowserHistory'; import { I18nextProvider } from 'react-i18next'; import i18n from './i18n'; import './common/styles/index.less'; import App from './App'; export const history = createBrowserHistory(); const ROOT = document.getElementById('root'); render( <I18nextProvider i18n={i18n}> <Provider store={configureStore(rootReducer)} > <Router history={history}> <App /> </Router> </Provider> </I18nextProvider>, ROOT );

如何使用

加入上面的代码后， 控制台会有一些log 信息， 表示语言已经加载好了。

在具体的业务组件中，使用方法是：

// ... import i18n from '@src/i18n'; console.log('哈哈哈哈哈i18n来一发:', i18n.t('INVALID_ORDER'));

控制台中：

对应json 中的信息：

后面你就可以愉快的加各种词条了。

Tips

我们在src 中的文件中引入了src 目录外的文件， 这是create-react-app 做的限制， 编译会报错， 把它去掉就好了：

结语

这里作为例， 就是把语言的json 文件下载下来放到locales 目录里， 如果想实时拉取，要保证文件下载完之后再render app.

类似：

loadResource(getLocale()) .then(() => { import('./app.js') })

当然你也可以免了这一步，直接下载好放到工程里来。

大概就是这样，以上就是实现国际化的全部代码，希望对大家有所帮助。也希望大家多多支持脚本之家。

您可能感兴趣的文章: