reactjs - 在函数中单击按钮时对更改文本做出反应

Question

考虑到这个 React 函数：

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom'
import HomeScreen from  './Screens/HomeScreen'
import './App.css';
import currentStrings from './utils/currentlang'

function App() {
  const currentlang = currentStrings;
  const switchLanguage = () =>{
    console.log("switching...");
    currentlang.switchLang();
  } 
  return (
    <BrowserRouter>
       <div className="grid-container">
        <header className="header">
          <div className="brand">
            <Link to="/" >
               
            </Link>
          </div>
          <div className="header-side">
            {currentlang.getCurrent.subtitle}
          </div>
          <div className="header-right">
            <button  onClick={switchLanguage}> {currentlang.getCurrent.traduction} </button>
          </div>
          <div>

          </div>
        </header>
        <main className="main">
          <div className="content">
            <Route path="/" exact={true} component={HomeScreen} />
          </div>

        </main>
        <footer className="footer">
          &#169; 2020 
         </footer>
      </div>
    </BrowserRouter>
   
  );
}

export default App;

我想在单击按钮时切换语言，函数本身会更改包含 html 文本列表的变量。然而，所有的研究都通过使用类来改变我的页面状态为我提供了解决方案，但是我的项目是功能性的并且在我的上下文中不起作用。

标签： reactjsstate