更改语言后，如何使用i18n字符串重新呈现所有相关组件

如何解决更改语言后，如何使用i18n字符串重新呈现所有相关组件

此主要App功能具有一个自定义钩子，将在按钮被点按时触发：

import React,{ useEffect } from 'react';
import { BrowserRouter,Route,Link } from 'react-router-dom'
import HomeScreen from  './Screens/HomeScreen'
import './App.css';
import { useCurrentLang } from './utils/useCurrentLang'
import {strings as engstrings} from './res/lang/eng/strings'

function App() {

  const currentStrings = useCurrentLang(engstrings); 
  return (
    <BrowserRouter>
       <div className="grid-container">
        <header className="header">
          <div className="brand">
            <Link to="/" >
                
            </Link>
          </div>
          <div className="header-side">
            {currentStrings.currentlang.subtitle}
          </div>
          <div className="header-right">
            <button  {...currentStrings}> 
              {currentStrings.currentlang.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;

但是从App路由的此组件函数还需要使用App中找到的钩子对象的相同引用：

import React from 'react';
import terminalImage from '../res/images/GNOMETerminalIcon.png';
import {useCurrentLang} from '../utils/useCurrentLang'
import {strings as engstrings} from '../res/lang/eng/strings'

const { Link } = require("react-router-dom");

function HomeScreen() {
    const currentStrings = useCurrentLang(engstrings); 
    return <div className="home">
        <ul className="menu-list">
            <li>
                <div className="about-link section">
                    <Link to="/about">{currentStrings.currentlang.about}</Link>
                </div>
            </li>
            <li>
                <div className="projects-link section">
                    <Link to="/about">{currentStrings.currentlang.about}</Link>   
                </div>
            </li>
            <li>
                <div className="contacts-link section">
                    <Link to="/about">{currentStrings.currentlang.about}</Link>
                </div>
            </li>
            <li>
                <div className="suggestions-link section">
                    <Link to="/about">{currentStrings.currentlang.about}</Link>   
                </div>
            </li>
        </ul>
        <div className="home-main-image">
            <img src={terminalImage} />
        </div>
    </div>
}

export default HomeScreen;

在触发App上的钩子时，两种功能都可能重新呈现吗？如果是，怎么办？

编辑：currentLang钩子：

import {useState} from 'react'
import {strings as frstrings} from '../res/lang/fr/strings'
import {strings as engstrings} from '../res/lang/eng/strings'

export const useCurrentLang = initialState => {
    if(initialState === 0){
        initialState = engstrings
    }
    const [currentlang,setLang] = useState(initialState);
    return {
        currentlang: currentlang,onClick: () => {
            if(currentlang === engstrings){
                setLang(frstrings)
            } else {
                setLang(engstrings)
            }
        }
    }
}

解决方法

问题

您面临的主要问题是x = [*range(1,11)] # * unpacks the range as elements of the list literal 的一部分，不知道语言已更改。

解决方案

使用React Tree来提供所有React树的更新，并将其包装在应用程序的顶部。用外行术语来说，现在Language Context发生变化时，您的应用程序就处于监听模式。因此，基本上，React现在要做的就是只要lang发生更改，它就会从上下文中找到使用lang的任何地方并更新组件。

关于React上下文here的文档

lang