Хук useTranslation () возвращает функцию t из неверной области - PullRequest
0 голосов
/ 21 апреля 2020

В моем проекте я использую react-i18next для переводов. В моих компонентах я получаю функцию t через withTranslation() HO C. В одном из компонентов я использую подкомпонент Table, импортированный из внутренней библиотеки компании. В библиотеке i18n реализован сам по себе, также с react-i18next. Тем не менее, строки в компоненте Table не переведены.

import React from 'react';
import { withTranslation } from 'react-i18next';
import { Table } from 'internal-library';

class MainComponent extends React.Component {
  render () {
    const { t, i18n } = this.props;
    return (
      <>
        <h1>
          {t('Table of objects')}
        </h1>
        <Table
          locale={i18n.language}
        />
      </>
    );
  }
}

export default withTranslation('common')(MainComponent)

При отладке я обнаружил причину ошибки. В коде Table функция t получается с помощью ловушки useTranslation(). По какой-то причине этот хук возвращает t из области моего проекта, а не из области библиотеки. В моей базе данных нет строк Table, поэтому перевод не выполняется.

Решением этой ошибки может быть явная передача экземпляра i18n в useTranslation() ловушку. К сожалению, изменение кода библиотеки не вариант, потому что это зависимость важного проекта. Я не могу добавить отсутствующие строки в свою базу данных, так как библиотека использует другой шаблон для ключей, который сломал бы мою базу данных.

Есть ли другое решение этой проблемы?

...