面试题：React组件在不同语言环境下的样式与布局调整

Question

考虑一个复杂的表单组件，在不同语言环境下，由于文字长度不同，可能需要对其布局进行调整（比如从左对齐变为右对齐），同时部分样式（如字体大小）也可能因语言文化习惯而有所不同。使用React和相关国际化技术，阐述如何实现这种根据语言环境动态调整组件样式与布局的功能，并给出关键代码示例。

Answer 1

1. 使用 react - i18next 库实现国际化：

   • 首先安装 react - i18next：

     npm install react - i18next i18next
     

   • 配置 i18next：

     import i18n from 'i18next';
     import { initReactI18next } from'react - i18next';
     
     const resources = {
       en: {
         translation: {
           // 英文翻译内容
         }
       },
       fr: {
         translation: {
           // 法文翻译内容
         }
       }
     };
     
     i18n
      .use(initReactI18next)
      .init({
         resources,
         lng: 'en', // 默认语言
         interpolation: {
           escapeValue: false
         }
       });
     
     export default i18n;
     

2. 根据语言环境调整样式和布局：

   • 在 React 组件中，利用 useTranslation hook 获取当前语言环境，并根据语言环境动态设置样式和布局。
   • 示例组件：

     import React from'react';
     import { useTranslation } from'react - i18next';
     
     const ComplexForm = () => {
       const { t, i18n } = useTranslation();
       const isRTL = i18n.language === 'ar';// 假设阿拉伯语是从右到左布局
       const formStyle = {
         textAlign: isRTL? 'right' : 'left',
         fontSize: isRTL? '14px' : '16px'// 假设阿拉伯语字体小一些
       };
     
       return (
         <form style={formStyle}>
           <label>{t('form.label')}</label>
           <input type="text" />
         </form>
       );
     };
     
     export default ComplexForm;
     

   • 在上述代码中：
     • 通过 useTranslation hook 获取 t 函数用于翻译文本以及 i18n 对象获取当前语言。
     • 根据当前语言环境（这里以阿拉伯语为例判断是否是从右到左布局）设置 textAlign 和 fontSize 等样式。
     • 然后在表单组件中应用这些动态样式。

3. 切换语言：

   • 可以通过 i18n.changeLanguage 方法切换语言。
   • 示例按钮组件：

     import React from'react';
     import { useTranslation } from'react - i18next';
     
     const LanguageSwitcher = () => {
       const { i18n } = useTranslation();
       const switchLanguage = (lng) => {
         i18n.changeLanguage(lng);
       };
     
       return (
         <div>
           <button onClick={() => switchLanguage('en')}>English</button>
           <button onClick={() => switchLanguage('fr')}>French</button>
         </div>
       );
     };
     
     export default LanguageSwitcher;
     

   • 上述按钮组件通过点击按钮调用 i18n.changeLanguage 方法来切换语言，从而触发组件重新渲染，应用新语言对应的样式和布局。