SO i18next 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>
    );
  }
}

我认为语言的改变是有效的，但不是以一种被动的方式起作用，因为当我点击一个标志时，改变并没有反映在 UI 中。我怎样才能做到这一点？

Answer 1

组件不显示更新的语言，因为它不重新呈现

正确的实现应该将新的道具传递给使用翻译但似乎没有的组件

（...要更新组件，您需要将语言作为道具传递或将其保持在状态中，然后在更改语言时组件将重新呈现）

所以看看使用包装器组件 https://react.i18next.com/latest/translation-render-prop 或提供商或类似 https://react.i18next.com/latest/i18nextprovider 因为它看起来不像示例中那样包装组件

SO i18next React 中的反应式翻译

SO i18next reactive translations in React

translation

internationalization

i18next

reactjs

reactive