国际化

• father::react
• base::i18n

代码示例

在 React 中实现国际化（i18n）通常使用 react-i18next 库。下面是一个简单的示例，展示如何在 React 应用中集成国际化。

1. 安装依赖

首先，安装 react-i18next 和 i18next：

npm install react-i18next i18next

2. 创建 i18n 配置

在项目根目录下创建一个 i18n.js 文件，并配置 i18next：

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
i18n
  .use(initReactI18next) // Passes i18n down to react-i18next
  .init({
    resources: {
      en: {
        translation: {
          welcome: "Welcome to React",
          description: "This is a simple internationalization example."
        }
      },
      zh: {
        translation: {
          welcome: "欢迎使用 React",
          description: "这是一个简单的国际化示例。"
        }
      }
    },
    lng: "en", // 默认语言
    fallbackLng: "en", // 回退语言
    interpolation: {
      escapeValue: false // React 已经安全处理了输出
    }
  });
export default i18n;

3. 在应用中引入 i18n

在你的 index.js 文件中引入 i18n.js：

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './i18n'; // 引入 i18n 配置
ReactDOM.render(<App />, document.getElementById('root'));

4. 使用翻译

在你的组件中使用 useTranslation 钩子来访问翻译功能：

// App.js
import React from 'react';
import { useTranslation } from 'react-i18next';
const App = () => {
  const { t, i18n } = useTranslation();
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };
  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('zh')}>中文</button>
    </div>
  );
};
export default App;

5. 运行应用

现在你可以运行你的 React 应用，并在页面上看到切换语言的效果。

npm start

总结

这个示例展示了如何使用 react-i18next 库在 React 应用中实现基本的国际化。你可以根据需求扩展语言和翻译内容。