Skip to content

Latest commit

 

History

History
177 lines (128 loc) · 5.34 KB

i18n.md

File metadata and controls

177 lines (128 loc) · 5.34 KB

国际化

国际化（internationalization）是设计和制造容易适应不同区域要求的产品的一种方式。它要求从产品中抽离所有地域语言，国家/地区和文化相关的元素。换言之，应用程序的功能和代码设计考虑在不同地区运行的需要，其代码简化了不同本地版本的生产。开发这样的程序的过程，就称为国际化。

本脚手架选用了由雅虎团队专门为 React 应用设计的国际化库 react-intl。脚手架的语言文件默认都放在 src/locales 目录中。在此目录中，相应的语言文件存放在相应的子目录下，例如：

├── src
    ├── locales
      ├── zh-CN               // 简体中文语言
        ├── home.ts           // Home 页面语言
        ├── user.ts           // User 页面语言
        └── index.ts          // 公共语言

将公共与页面语言分离是为了实现 懒加载，在较小的应用中效果可能不是很明显，但是，随着你的应用语言文件增大它的收益就会变得越发明显。

注意： 页面语言文件的命名应当遵循 命名约定

引入 antd

Antd Design 团队为 React 提供了一款优秀的 UI 框架，为了让它也保持国际化，我们需要在公共语言文件中引入它的语言文件，示例：

import antd from 'antd/lib/locale-provider/zh_CN';

const zh_CN: Locale = {
  antd,
  Hello: '你好',
};

export default zh_CN;

如果你需要为表单组件统一设置验证提示模块，可以追加 validateMessages 属性：

import antd from 'antd/lib/locale-provider/zh_CN';

const zh_CN : Locale = {
  antd,
  validateMessages: {
    ...
  },
};

export default zh_CN;

区域设置

你可以使用 /src/utils/locale 中的 setLocale 方法动态地更改应用运行过程中使用的语言：

import React from 'react';
import { setLocale } from '@/utils/locale';

export default () => {
  const handleClick = () => {
    setLocale('en');
  };

  return <button onClick={handleClick}>修改语言</button>;
};

确定当前语言环境

你可以使用 /src/utils/locale 中的 getLocale 和 isLocale 方法确定当前的区域设置或者检查语言环境是否为给定值：

import React from 'react';
import { getLocale, isLocale } from '@/utils/locale';

export default () => {
  const locale = getLocale();

  if (isLocale('en')) {
  }
};

定义翻译字符串

所有语言文件必须返回 键值对 类型数据，语言文件建议使用 typescript 或 javascript 语言编写，如果你需要使用 json 编写，你需要在 config/webpack.js 文件中加入 json 解析后缀，参照：

module.exports = (env, { mode, target }) => {
  ...
  return merge({
    ...
    resolve: {
      extensions: ['.js', '.ts', '.tsx', '.jsx', 'json'],
    },
  })
}

使用短键

脚手架默认开启了代码分割与懒加载，所以，即使你不使用前缀也不用担心 id 冲突。例如：

// /src/locales/zh-CN/index.ts
const zh_CN: Locale = {
  Hello: '你好',
};

使用翻译字符串作为键

对于有大量翻译需求的应用，如果每条翻译语句都要一一使用 短键 来定义，那么当你在组件中尝试去引用这些 短键 的时候，很容易变得混乱。其次，如果你的备用语言是英语，那么，即使你没有创建英语语言包也可以更好的使用 id 作为回退文案。因此，建议你使用翻译字符串作为键 来定义语言包文件。例如：

// /src/locales/zh-CN/index.ts
const zh_CN: Locale = {
  'Hello World!': '你好，世界！',
};

检索翻译字符串

你可以使用 react-intl API 或组件从语言文件中检索，例如：

import React from 'react';
import { useIntl, FormattedMessage } from 'react-intl';

export default () => {
  const intl = useIntl();

  return (
    <div>{intl.formatMessage({ id: 'Hello Wolrd!' })}</div>

    // 组件的方式
    // <FormattedMessage id="Hello Wolrd!" />
  );
};

翻译字符串中的参数替换

如果需要，你可以在翻译字符串中定义占位符。所有的占位符使用花括号包裹 {} 。例如，你可以使用占位符 name 定义欢迎消息：

// /src/locales/zh-CN/index.js
export default {
  Hello: '你好，{name}!',
};

现在，你可以传递 values 参数，它会将值替换到翻译字符串的占位符中：

import React from 'react';
import { useIntl, FormattedMessage } from 'react-intl';

export default () => {
  const intl = useIntl();

  return (
    <div>{intl.formatMessage({ id: 'Hello' }, { name: '世界' })}</div>

    // 组件的方式
    // <FormattedMessage id="Hello" values={{ name: '世界' }} />
  );
};

使用方法先介绍到这里，你还可以通过 react-intl 文档 去探索更多高级用法。


<< Hooks 数据流      数据模拟 >>