Блог

Я использую платформу react.i18next (https://react.i18next.com /). Я совсем новичок в React, но интернационализация работает с использованием withTranslation HOC (https://react.i18next.com/latest/withtranslation-hoc).

Проблема заключается в одном конкретном дочернем компоненте внутри Modal.

Это задействованные строки в моем файле index.jsx:

 ...
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

const Loader = () => (
  <div>loading texts...</div>
);

const Index = () => (
    <Suspense fallback={<Loader/>}>
      <I18nextProvider i18n={i18n}>
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <App/>
          </ConnectedRouter>
        </Provider>
      </I18nextProvider>
    </Suspense>
)
  

И это в моем login.jsx (модальный вход). Переводы здесь работают:

 ...
import { withTranslation } from 'react-i18next';

class LoginModal extends Component {
  render() {
    const { t, i18n } = this.props;

    const changeLanguage = (lng) => {
      i18n.changeLanguage(lng);
    };
    return (
      <Modal isOpen={this.props.show} toggle={this.props.toggle} className={this.props.className}>
        <ModalHeader toggle={this.props.toggle}>Login</ModalHeader>
        <ModalBody>
          <p>{t('title')}</p>
          {this.state.isLogin ? (<LoginForm />) : (<RegisterForm />)}
        </ModalBody>
      </Modal>
    );
  }
}

export default withTranslation("landing")(LoginModal);

  

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

 ...
import { withTranslation } from 'react-i18next';
  constructor(props) {
    super(props)
  }

  render() {
    const { t, i18n } = this.props;
    const changeLanguage = (lng) => {
      i18n.changeLanguage(lng);
    };
    return (
      <p>FORM</p>
    )
  }
}

export default withTranslation("form")(LoginForm)
  

Я получаю следующую ошибку:

useTranslation.js:12 Uncaught TypeError: Cannot read property 'i18n' of undefined at useTranslation (useTranslation.js:12)

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

Я попытался передать i18n prop из модального в дочерний компонент LoginForm, но, по-моему, платформа интернационализации считывает не локальный i18n, а свойство i18n из контекста. Это строки, связанные с ошибкой внутри кода фреймворка:

var _ref = getHasUsedI18nextProvider() ? useContext(I18nContext) : {},
i18nFromContext = _ref.i18n;

Я провел много исследований и получаю несколько похожих ошибок, но ничего, что могло бы решить мою проблему. Не очень много информации, использующей HOC для переводов, и это единственный способ, который сработал для меня с использованием i18next.

Любая помощь будет очень оценена.

Заранее спасибо, Edu