如何在没有钩子的React中使用翻译i18n？

// en.json
{
  "welcome": "Welcome",
  "hello": "Hello"
}

// zh.json
{
  "welcome": "欢迎",
  "hello": "你好"
}

import React from 'react';
import { useTranslation } from 'react-i18next';

function Translation() {
  const { t } = useTranslation();

  return (
    <div>
      <h2>{t('welcome')}</h2>
      <p>{t('hello')}</p>
    </div>
  );
}

export default Translation;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './en.json'; // 引入英文翻译资源文件
import zh from './zh.json'; // 引入中文翻译资源文件

i18n.use(initReactI18next).init({
  lng: 'en', // 默认语言为英文
  resources: {
    en: {
      translation: en,
    },
    zh: {
      translation: zh,
    },
  },
  fallbackLng: 'en', // 如果未找到对应语言的翻译文本，将回退到英文
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

import React from 'react';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n'; // 引入i18n配置文件
import Translation from './Translation'; // 引入翻译组件

function App() {
  return (
    <I18nextProvider i18n={i18n}>
      <Translation />
    </I18nextProvider>
  );
}

export default App;