如何在React项目中实现i18next翻译

Question

当您按下按钮时，语言应该改变：

<a href="/" className={`bn5 ${i18next.language === LOCALES.UK ? 'disabled-link' : ''}`} onClick={handleUkrlanguage}>Ukrainian</a>
<a href="/" className={`bn5 ${i18next.language === LOCALES.EN ? 'disabled-link' : ''}`} onClick={handleEngLanguage}>English</a>

通过 Redux 更改按钮的状态是正确的。 console.log() 中的输出证实了这一点。 我认为问题在于 i18next 即使更改语言后也没有收到翻译。

下面我将给您该组件的代码，您将看到 console.log() 及其结果。

import './header.css';
import gsap from 'gsap';
import React, { useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { ukrLanguage, engLanguage } from '../../redux/actions';
import i18next from 'i18next';
import { LOCALES } from '../i18n/constants';
import { Trans, useTranslation } from 'react-i18next';
import '../i18n/index';

const Header = () => {
  const heroRef = useRef(null);
  const { t } = useTranslation();
  const selectedLanguage = useSelector(state => state.language.selectedLanguage);

  useEffect(() => {
    const tl = gsap.timeline();
    tl.fromTo(heroRef.current, { x: -100, opacity: 0 }, { x: 0, opacity: 1, duration: 2 }, 1);
  }, []);


  useEffect(() => {
    console.log('Changing language to:', selectedLanguage);
    i18next.changeLanguage(selectedLanguage).then(() => {
      console.log('Language changed to:', i18next.language);
      console.log('Current translations:', i18next.getDataByLanguage(i18next.language));
      console.log('t("Welcome to React"):', t('Welcome to React'));
    }).catch(err => {
      console.error('Error changing language:', err);
    });
  }, [selectedLanguage]);

  const dispatch = useDispatch();
  const handleUkrlanguage = (event) => {
    event.preventDefault();
    console.log('Switching to Ukrainian');
    dispatch(ukrLanguage());
  }

  const handleEngLanguage = (event) => {
    event.preventDefault();
    console.log('Switching to English');
    dispatch(engLanguage());
  }
  console.log('Rendering Header with language:', i18next.language);
  console.log('Current translations in Header:', i18next.getDataByLanguage(i18next.language));
  console.log('t("Welcome to React") in render:', t('Welcome to React'));

  return (
    <header className='header'>
      <div className="container header__container">
        <div className="header__wrapper">
          <a href="#" className='header__hero' ref={heroRef}>
            <span className='header__surname'>My </span>
            <span className='first__name'>CV</span>
          </a>
          <div className="lng__btns-wrapper">
            <h3>{selectedLanguage}</h3>
            <a href="/" className={`bn5 ${i18next.language === LOCALES.UK ? 'disabled-link' : ''}`} onClick={handleUkrlanguage}>Ukrainian</a>
            <a href="/" className={`bn5 ${i18next.language === LOCALES.EN ? 'disabled-link' : ''}`} onClick={handleEngLanguage}>English</a>
            </div>
          <h3>{t('Welcome to React')}</h3>
          <h3><Trans>Welcome to React</Trans></h3>
        </div>
      </div>
    </header>
  );
}

export default Header;

Answer 1

问题很可能是因为您在直接从底层

changeLanguage

库导入的

i18next

上调用

i18next

。

您直接调用的任何内容都不会经过

react-i18next

。您需要从

i18n

上下文中提取

react-i18next

对象并调用它

changeLanguage

。这将调用额外的绑定

react-i18next

添加并导致提供者通过其上下文刷新所有

t

调用。

const { t, i18n } = useTranslation();

// Now you can call changeLanguage using this i18n where needed.
// Avoid using imported i18n in your component render.

整个过程中都需要使用

i18n

钩子中的

useTranslation()

进行更改。除了对提供程序的初始设置之外，不应该有任何内容引用从组件内部导入的组件。

另外，除非我看起来不够仔细，否则我在存储库中注意到您的语言目录文件丢失了，但我假设您在本地有它们。您需要完成所有翻译、注册所有翻译包等。