response-i18next: несколько экземпляров i18next в одном дереве компонентов - PullRequest
Новая
       12

response-i18next: несколько экземпляров i18next в одном дереве компонентов

0 голосов
/ 06 мая 2019

Что я хочу сделать:

  • использовать один экземпляр i18next (i18nMain) в <App />.Это своего рода глобальная область видимости.

  • использовать другой экземпляр i18next (i18nSub) только для одного компонента в дереве компонентов <App />

utils / i18next: создайте 2 экземпляра i18next 

import i18n from 'i18next';

const i18nMainInstance = i18n.createInstance(option1);
i18nMainInstance.init();

export const i18nMain = i18nMainInstance;

const i18nSubInstance = i18n.createInstance(option2);
i18nInstanceMain.init();

export const i18nSub = i18nSubInstance;

App.js 

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { withTranslation } from 'react-i18next';
import ComponentWithSubInstanceWithProvider from './ComponentWithSubInstanceWithProvider';

class App extends Component {
  render() {
    return (
      <div>
        {this.props.t('key')} // t from i18nMain
        <ComponentWithSubInstanceWithProvider />
        <ComponentWithI18nMainInstance />
      </div>
    );
  }
}

export default withTranslation()(App);

ComponentWithSubInstance.js 

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { I18nextProvider, withTranslation } from 'react-i18next';
import { i18nSub } from 'utils/i18next';

class ComponentWithSubInstance extends Component {
  render() {
    return (
      <div>
        {this.props.t('key')} // t from i18nSub
      </div>
    );
  }
}

const ComponentWithSubInstanceWithTranslation = withTranslation()(ComponentWithSubInstance);

class ComponentWithSubInstanceWithProvider extends Component {
  render() {
    return (
      <I18nextProvider i18n={i18nSub}>
        <ComponentWithSubInstanceWithTranslation />
      </I18nextProvider>
    );
  }
}

export default ComponentWithSubInstanceWithProvider;

Выполните рендеринг следующим образом 

import React from 'react';
import ReactDOM from 'react-dom';
import { I18nextProvider } from 'react-i18next';
import { i18nMain } from 'utils/i18next';
import App from './App';

ReactDOM.render(
  <I18nextProvider i18n={i18nMain}>
    <App />
  </I18nextProvider>, document.getElementById('app')
);

Надеюсь, вы понимаете, для чего я иду.К сожалению, этот код выдает следующую ошибку.Я полагаю, что это потому, что Reaction-i18next использует контекстный API, но компонент React принимает только 1 контекст на компонент. 

Uncaught (in promise) Error: withI18nextTranslation(ComponentWithSubInstance) suspended while rendering, but no fallback UI was specified.
...