Блог

Главная - Вопросы по программированию - как не дублировать react i18next в каждом компоненте

как не дублировать react i18next в каждом компоненте

#reactjs #i18next #react-i18next

#reactjs #i18next #react-i18next

Вопрос:

я начинаю использовать I18next в своем приложении react. — > https://react.i18next.com/latest/using-with-hooks

я использую с помощью theyre hook {useTranslation}

но проблема и раздражающая ситуация в том, что мне нужно писать это снова и снова в каждом компоненте:

 import { useTranslation } from "react-i18next";//////////////this
 const example = () => {
const { t, i18n } = useTranslation();////////////////// and this
return (
    <>
        <p>{t("Thanks.1")}</p>

странно, что это способ его реализации,
есть способ объявить его глобально и просто повторно использовать во всех моих приложениях?

Комментарии:

1. Вы можете создать одноранговый (компонент высокого порядка), который передает метод всем дочерним компонентам. Эти компоненты должны просто получить prop и вызвать метод.

2. это будет работать с функциональными компонентами?

3. Я думаю, что HOC может быть функциональным компонентом, но его реализация может быть немного сложной, особенно в typescript

4. но мне это не помогает, мне нужно передать реквизиты любому компоненту… его также выглядит messy…to добавляйте реквизит к каждому компоненту { t, i18n }. выглядит странно

5. Это не волшебный трюк, вам нужен доступ к t функции для перевода, есть 2-3 способа сделать это: 1. useTransaltion hook, 2. withTranslation HOC, 3. импортировать экземпляр напрямую (не рекомендуется в приложениях React)

Ответ №1:

 export const ExampleComponent_2 = ({t}) => {
 return (
   <p>{t("Thanks.2")}</p>
    )
  }


export const ExampleComponent_2 = ({t}) => {
 return (
   <p>{t("Thanks.1")}</p>
   )
 }

в верхнем контейнере используйте его

 import { useTranslation } from "react-i18next";

export const App = ({ t }) => {
  return (
  <ExampleComponent_1 t={t}/>
  <ExampleComponent_2 t={t}/>
 )
}