В моем проекте я использую 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()
ловушку. К сожалению, изменение кода библиотеки не вариант, потому что это зависимость важного проекта. Я не могу добавить отсутствующие строки в свою базу данных, так как библиотека использует другой шаблон для ключей, который сломал бы мою базу данных.
Есть ли другое решение этой проблемы?