国际化

/src/i18n中进行国际化文件的编写,模块化方式。

项目中国际化相关的组件设置:

  • 菜单:{local, text} local对应i18n.menu中的字段,text为国际化失败,默认显示;
  • 页面标题(Tab标签):{local, text} local对应i18n.menu中的字段,text为国际化失败,默认显示;
  • 第三方 Ant Design、moment等在 src/i18n/Local.jsx中配置;
  • 经过models(redux)处理的数据,可以在src/i18n/redux-middleware.js中处理;

获取当前国际化字符集对象

  • 与models链接的页面:
  1. @config({
  2. connect: state => ({
  3. local: state.system.i18n,
  4. }),
  5. })
  6. export default class SomePage extends React.Component {
  7. render() {
  8. const userText = this.props.local.menu.users;
  9. return (
  10. <div>{userText}<div>
  11. );
  12. }
  13. }
  • 非React组件,无法与models链接的js方法中:
  1. import {getCurrentLocal} from '@/i18n';
  2. function someFunction() {
  3. const currentLocal = getCurrentLocal();
  4. const userMenuText = currentLocal.menu.users;
  5. ...
  6. }

不需要国际化

如果不需要国际化,去掉local相关配置即可,系统默认简体中文。

  • 菜单:去掉local
  • 页面标题(Tab标签):直接传递需要显示的内容(字符串或者ReactNode),不需要{local, text}这样的结构注:考虑到实际很多系统不需要国际化、简化代码复杂度,一些内置的demo页面并没有添加国际化。

封装

可以将使用频率比较高的Table、Pagination、FormElement等组件进行国际化的封装。

TODO

手工维护国际化文件、通过变量引用是最基础的方式,项目过大、过多时,显得力不足心。

  • 开发过程中,正常书写代码;
  • 通过webpack 或 babel插件提取组件中的文案,转换为变量名,同时生成国际化文件;
  • 通过一个翻译平台维护国际化文案;
  • 翻译平台提供自动翻译,简化翻译过程;
  • 等等