Ant Design 组件级国际化翻译实践

Ant Design 组件级国际化翻译实践

在开发多语言应用时，国际化（Internationalization，简称i18n）是非常重要的一环。Ant Design 提供了丰富的 UI 组件，但在实际项目中，我们可能需要对这些组件进行定制化的国际化处理。本文将介绍一种在组件层面实现国际化的方法，并提供一个具体的实现案例。

盖要

本教程的目标是在不修改 Ant Design 源码的情况下，实现以下组件的国际化：

• Button
• Input
• Select
• Radio
• Popconfirm
  // 其它组件也适用于此方法。请根据实际情况添加。

我们将通过覆盖这些组件的渲染方法来实现这一目标。

实现原理

我们的策略是利用 JavaScript 的动态特性，覆盖 Ant Design 中特定组件的渲染方法。在组件渲染之前拦截原始文本，经过国际化处理最终呈现给用户。

优势

1. 便于搜索: 在传统的国际化工具中更适合歪果仁，如{i18nt(“common.page.okBtn”)} 这样在我们需要快速定位问题时，不便于搜索。
2. 适用于需要大量国际化改造项目: 假设一个体量很大的前端项目去国际化改造，则需要每个地方去把文本换成变量。如此工作量是非常巨大的，如果在组件层面实现国际化，则只需要准备翻译的文本和修改组件渲染就可以了。

步骤概述

1. 检测国际化函数：确保传入了一个有效的国际化翻译函数。
2. 备份原始渲染方法：在覆盖之前，先备份每个组件的原始渲染方法。
3. 覆盖渲染方法：根据需要翻译的内容类型（如按钮文字、输入框提示等），在渲染前进行翻译。

示例代码

首先，我们需要创建一个类 ResetAntdRender 来封装上述逻辑：

import { Button, Input, Popconfirm, Radio, Select } from "antd";

class ResetAntdRender {
  constructor(i18nt) {
    if (i18nt === undefined || typeof i18nt != "function") {
      throw new Error("国际化翻译工具不可用");
    }
    this.i18nt = i18nt;
    // 阻止开发环境热更新重载
    if (!Button.renderBk) {
      this.initBtn();
      this.initInput();
      this.initSelect();
      this.initPopconfirm();
      this.initRadio();
    }
  }

  initRadio() {
    Radio.Button.renderBk = Radio.Button.render;
    Radio.Button.render = (...args) => {
      if (args[0]) {
        const props = { ...args[0] };
        if (typeof props.children === "string") {
          props.children = this.i18nt(args[0].children);
        }
        return Radio.Button.renderBk(props, args[1]);
      }
      return Radio.Button.renderBk(...args);
    };
    Radio.Group.type.renderBk = Radio.Group.type.render;
    Radio.Group.type.render = (...args) => {
      if (args[0]) {
        const props = { ...args[0] };
        if (props.options) {
          props.options = props.options.map(item => {
            if (typeof item.label === "string") {
              return {
                ...item,
                label: this.i18nt(item.label)
              };
            }
            return item;
          });
        }
        return Radio.Group.type.renderBk(props, args[1]);
      }
      return Radio.Group.type.renderBk(...args);
    };
  }

  initBtn() {
    Button.renderBk = Button.render;
    Button.render = (...args) => {
      if (args[0]) {
        const props = { ...args[0] };
        if (typeof props.children === "string") {
          props.children = this.i18nt(args[0].children);
        }
        return Button.renderBk(props, args[1]);
      }
      return Button.renderBk(...args);
    };
  }

  initInput() {
    Input.renderBk = Input.render;
    Input.render = (...args) => {
      if (args[0]) {
        const props = { ...args[0] };
        props.placeholder = this.i18nt(args[0].placeholder);
        return Input.renderBk(props, args[1]);
      }
      return Input.renderBk(...args);
    };
    Input.TextArea.renderBk = Input.TextArea.render;
    Input.TextArea.render = (...args) => {
      if (args[0]) {
        const props = { ...args[0] };
        props.placeholder = this.i18nt(args[0].placeholder);
        return Input.TextArea.renderBk(props, args[1]);
      }
      return Input.TextArea.renderBk(...args);
    };
  }

  initSelect() {
    Select.renderBk = Select.render;
    Select.render = (...args) => {
      if (args[0]) {
        const props = { ...args[0] };
        props.placeholder = this.i18nt(args[0].placeholder);
        return Select.renderBk(props, args[1]);
      }
      return Select.renderBk(...args);
    };
  }

  initPopconfirm() {
    Popconfirm.renderBk = Popconfirm.render;
    Popconfirm.render = (...args) => {
      if (args[0]) {
        const props = { ...args[0] };
        if (typeof props.title === "string") {
          props.title = this.i18nt(args[0].title);
        }
        if (typeof props.okText === "string") {
          props.okText = this.i18nt(args[0].okText);
        }
        if (typeof props.cancelText === "string") {
          props.cancelText = this.i18nt(args[0].cancelText);
        }
        // props.placeholder = this.i18nt(args[0].placeholder);
        return Popconfirm.renderBk(props, args[1]);
      }
      return Popconfirm.renderBk(...args);
    };
  }
}

export default ResetAntdRender;

使用说明

1. 引入必要的库：在你的项目中引入 Ant Design 的相关组件。
2. 创建国际化翻译函数：创建一个函数，用于将文本翻译成所需的语言。
3. 实例化 ResetAntdRender 类：在项目的入口文件中，创建 ResetAntdRender 的实例，并传递翻译函数作为参数。

示例

假设你已经有了一个名为 translate 的国际化翻译函数，你可以这样使用：

// app.js 或其他入口文件
import ResetAntdRender from './ResetAntdRender';

// 假设 translate 是你的国际化翻译函数
const i18nt = (text) => translate(text, currentLanguage);

// 实例化 ResetAntdRender
new ResetAntdRender(i18nt);

最终实现

// 配置完成就可以像无国际化一样正常开发了，最终显示效果上实现国际化翻译
import React from 'react'
import {Button} from "antd"
const App = () => {
  return <>
    <Button>按钮</Button>
    </>
}
export default App

结语

通过上述方法，我们可以轻松地在 Ant Design 的组件层面实现国际化翻译，而无需修改任何源码。这不仅提高了开发效率，还使得我们的应用能够更好地支持多语言环境。希望这篇教程对你有所帮助！