在类组件中反应 useTranslation 替代方案

问题描述

我是 React 的初学者（就像我在 StackOverflow 中一样，如果我的帖子形式不太正确，请见谅）

我有这个 SPA 应用程序，可以将我的内容从法语翻译成英语再翻译回来，效果很好，但我想在我的语言切换按钮中添加一个“活动”类名，以便我可以在 css 中强调活动语言，并且我发现我必须做的是处理组件的状态。现在我使用带有 useTranslation 的函数组件，如果我尝试将我的函数组件转换为类组件，它会说 useTranslation 不能用于类组件。

你们中的任何人都可以帮我重写我的组件，这样我就可以将它变成一个类组件并使用构造函数并处理状态，但仍然使用我现在用于翻译的相同钩子和函数吗？

>

我发现以前的 aswers 使用 withTranslation 包装器，但没有示例会考虑我的切换按钮和用于导航的 changeLanguage 功能，仅适用于 {t} 纯字符串，所以我有点迷失在如何正确地写这个...

这是我作为函数组件的应用代码：

import React,{ Component } from "react";
import {
  Route,NavLink,HashRouter
} from "react-router-dom";
import Home from "./Home";
import Projets from "./Projets";
import Contact from "./Contact";
import Design from "./Design";
import Web from "./Web";
import ReactDOM from "react-dom";
import { useTranslation,Trans } from "react-i18next";

export default function App() {
  const { t,i18n } = useTranslation();

  const changeLanguage = lng => {
    i18n.changeLanguage(lng);
  };

  return (
    <div className="App">
      <div className="App-header">
        <h1>{t("Bienvenue sur notre Blog")}</h1>
       
      </div>

      <HashRouter>
            <div className="main-container">
            <div className="navigation">
            <ul className="nav-list">
                <li className="nav-links"><NavLink exact to="/"><Trans>Accueil</Trans></NavLink></li>
                <li className="nav-links"><NavLink to="/projets"><Trans>Projets</Trans></NavLink></li>
                  <ul className="nav-sublist">
                    <li className="nav-sublinks"><NavLink to="/projets/graphisme-maquettes"><Trans>Graphisme</Trans></NavLink></li>
                    <li className="nav-sublinks"><NavLink to="/projets/web"><Trans>Web</Trans></NavLink></li>
                  </ul>
                <li className="nav-links"><NavLink to="/contact"><Trans>Contact</Trans></NavLink></li>
            </ul>
            <div class='langSelect'>
              <button onClick={() => changeLanguage("fr")} class='langBtn' value='lang'>fr</button>
              <button onClick={() => changeLanguage("en")} class='langBtn' value='lang'>en</button>
          </div>
            </div>
            <div className="content">
                <Route exact path="/" component={Home}/>
                <Route path="/projets" component={Projets}/>
                <Route path="/projets/graphisme-maquettes" component={Design}/>
                <Route path="/projets/web" component={Web}/>
                <Route path="/contact" component={Contact}/>
            </div>
            </div>
        </HashRouter>
    </div>
  );
}

这是我的 i18n.js 文件：

import i18n from "i18next";
// import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";

i18n
  // .use(LanguageDetector)
  .use(initReactI18next)
  .use(LanguageDetector)
  .init({
    // we init with resources
    resources: {
      en: {
        translations: {
          Accueil:"Home",Projets:"Work",Graphisme:"Design",Web: "Web",Contact:"Contact",// "Projets":"Work","Bienvenue sur notre Blog":"Welcome to our Blog"
          
        }
      },fr: {
        translations: {
          Accueil:"Accueil",Projets:"Projets",Graphisme:"Graphisme",// "Projets":"Projets","Bienvenue sur notre Blog":"Bienvenue sur notre Blog"
        }
      }
    },fallbackLng: "fr",debug: true,// have a common namespace used around the full app
    ns: ["translations"],defaultNS: "translations",keySeparator: false,// we use content as keys

    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

现在，我想要实现的是这样的：

import React,Trans } from "react-i18next";

class App extends Component {

constructor(){
         super();

         this.state = {
              underline: false
         }
    }

render {
  const { t,i18n } = useTranslation(); => OBVIoULSY USE SOMETHING ELSE

  const changeLanguage = lng => {
    i18n.changeLanguage(lng);
  };                        => ADD/REMOVE THE CLASSNAME HERE AT THE SAME TIME I CHANGE LANGUAGE?

  return (
    <div className="App">
      <div className="App-header">
        <h1>{t("Bienvenue sur notre Blog")}</h1>
       
      </div>

      <HashRouter>
            <div className="main-container">
            <div className="navigation">
            <ul className="nav-list">
                <li className="nav-links"><NavLink exact to="/"><Trans>Accueil</Trans></NavLink></li>
                <li className="nav-links"><NavLink to="/projets"><Trans>Projets</Trans></NavLink></li>
                  <ul className="nav-sublist">
                    <li className="nav-sublinks"><NavLink to="/projets/graphisme-maquettes"><Trans>Graphisme</Trans></NavLink></li>
                    <li className="nav-sublinks"><NavLink to="/projets/web"><Trans>Web</Trans></NavLink></li>
                  </ul>
                <li className="nav-links"><NavLink to="/contact"><Trans>Contact</Trans></NavLink></li>
            </ul>
            <div class='langSelect'>
              <button onClick={() => changeLanguage("fr")} class='langBtn' value='lang'>fr</button>
              <button onClick={() => changeLanguage("en")} class='langBtn' value='lang'>en</button>
          </div>
            </div>
            <div className="content">
                <Route exact path="/" component={Home}/>
                <Route path="/projets" component={Projets}/>
                <Route path="/projets/graphisme-maquettes" component={Design}/>
                <Route path="/projets/web" component={Web}/>
                <Route path="/contact" component={Contact}/>
            </div>
            </div>
        </HashRouter>
    </div>
  );
}
}
export default App;

提前致谢，我希望你有你需要的一切，我真的“只是”需要指导如何编写所有这些而不改变它的工作方式，我希望它实际上是可行的......

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）