SO i18следующие реактивные переводы в React

Question

У меня проблема с попыткой сделать реактивный перевод с i18next на React.

Это важные файлы:

i18n / index.js

import i18next from 'i18next';

import en from './en.json';
import es from './es.json';
import it from './it.json';


const i18n = i18next.init({
  interpolation: {
    // React already does escaping
    escapeValue: false,
  },
  lng: 'en',
  // Using simple hardcoded resources for simple example
  resources: {
    en: { translation: en },
    es: { translation: es },
    it: { translation: it }
  },
});

/**
 * Translates the given string code into the current language's representation.
 * 
 * @param {string} text The string code to be translated.
 * @returns {string} The translated text.
 */
export function t(text) {
  return i18n.t(text);
}

/**
 * Changes the app's current language.
 * 
 * @param {string} language The language code, i.e: 'en', 'es', 'it', etc.
 */
export function changeLanguage(language) {
  i18n.changeLanguage(language, (err) => {
    if (err) {
      console.log('Language error: ', err);
    }
  });
}

Flags.jsx

import React, { Component } from 'react';

import { changeLanguage } from '../../../../i18n';

import './Flags.css';

export default class Flags extends Component {
  /**
   * Constructor.
   * 
   * @param {any} props The components properties. 
   */
  constructor(props) {
    super(props);
    this.changeLang = this.changeLang.bind(this);
  }
  /**
   * Changes the app's current language.
   * 
   * @param {string} language The language code, i.e: 'en', 'es' or 'it'.
   */
  changeLang(language) {
    changeLanguage(language);
    alert('language change: ' + language);
  }

  /**
   * Renders this component.
   * 
   * @returns {string} The components JSX code.
   */
  render() {
    return (
      <li role="presentation">
        <div className="flags">
          <button onClick={ () => this.changeLang('en') }>
            <span className="flag-icon flag-icon-us"></span>
          </button>
          <button onClick={ () => this.changeLang('es') }>
            <span className="flag-icon flag-icon-es"></span>
          </button>
          <button onClick={ () => this.changeLang('it') }>
            <span className="flag-icon flag-icon-it"></span>
          </button>
        </div>
      </li>
    );
  }
}

Я думаю, что смена языка работает, но не реагирует, потому что когда я делаю щелчок по флагу, изменение не отражается в пользовательском интерфейсе. Как я мог сделать это?

Answer 1

Компонент не показывает обновленный язык, потому что он не перерисовывает

правильная реализация должна передавать новые реквизиты компонентам, которые используют перевод, но, похоже, они не

(... чтобы обновить компонент, вам нужно передать язык как опору или оставить его в состоянии, и при смене языка компонент будет перерисован)

поэтому взгляните на использование компонента-оболочки https://react.i18next.com/components/i18n-render-prop или провайдера или аналогичного https://react.i18next.com/components/i18nextprovider поскольку он не похож на вас упаковка ваших компонентов, как в примерах