面试题：React中如何实现基础的组件国际化

Question

在React项目中，假设你要将一个简单的按钮组件的文本进行国际化处理，例如从英文切换到中文。请描述实现这一功能的基本步骤，并举例说明使用常见国际化库（如react - i18next）的代码结构。

Answer 1

实现国际化处理的基本步骤

1. 安装国际化库：在React项目中，选择一个合适的国际化库，如 react - i18next。通过npm或yarn安装，例如：npm install react - i18next i18next。
2. 配置国际化库：
   • 创建语言资源文件。例如，创建 locales/en/translation.json 和 locales/zh/translation.json。在 en 文件夹下的 translation.json 可以写：

   {
       "buttonText": "Click Me"
   }
   

   在 zh 文件夹下的 translation.json 写：

   {
       "buttonText": "点击我"
   }
   

   • 配置 i18next。在项目入口文件（通常是 index.js）或专门的配置文件中，配置 i18next 实例。例如：

   import i18n from 'i18next';
   import { initReactI18next } from'react - i18next';
   import enTranslation from './locales/en/translation.json';
   import zhTranslation from './locales/zh/translation.json';
   
   const resources = {
       en: {
           translation: enTranslation
       },
       zh: {
           translation: zhTranslation
       }
   };
   
   i18n
      .use(initReactI18next)
      .init({
           resources,
           lng: 'en', // 默认语言
           interpolation: {
               escapeValue: false
           }
       });
   

3. 在组件中使用国际化：将按钮组件进行改造，使用国际化库提供的功能来显示不同语言的文本。

使用 react - i18next 的代码结构示例

1. 改造按钮组件：假设按钮组件名为 Button.js。

   import React from'react';
   import { useTranslation } from'react - i18next';
   
   const Button = () => {
       const { t } = useTranslation();
       return <button>{t('buttonText')}</button>;
   };
   
   export default Button;
   

2. 切换语言：可以通过修改 i18next 的 lng 属性来切换语言。例如，在某个包含切换按钮的组件中：

   import React from'react';
   import i18n from 'i18next';
   
   const LanguageSwitcher = () => {
       const switchToChinese = () => {
           i18n.changeLanguage('zh');
       };
       const switchToEnglish = () => {
           i18n.changeLanguage('en');
       };
   
       return (
           <div>
               <button onClick={switchToEnglish}>英文</button>
               <button onClick={switchToChinese}>中文</button>
           </div>
       );
   };
   
   export default LanguageSwitcher;