Question

我想完成的是：

使用SELECT COUNT (Var1) as 'varCount' from Vartable inner join UserTable on usr_id where usr_login = 'bella' and Var_Date between 201801 and 201812中的i18next（i18nMain）的一个实例。这是一种全球范围。
仅对<App />的组件树中的一个组件使用i18next（i18nSub）的另一实例

utils / i18next：创建2个i18next实例

<App />

App.js

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;

ComponentWithSubInstance.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);

这样渲染

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;

希望您能理解我要做什么。不幸的是，此代码引发以下错误。我相信这是因为react-i18next使用上下文api，但是React组件每个组件仅需要1个上下文。

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')
);

react-i18next：同一组件树中的多个i18next实例

0 个答案: