如何在每个组件中不重复反应 i18next

Question

我开始在我的 React 应用程序旁边使用 I18。 - > https://react.i18next.com/latest/using-with-hooks

我使用它们的钩子 {useTranslation}

但问题和烦人的情况是我需要在每个组件中一遍又一遍地写它：

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

这看起来很奇怪，这是实现它的方式，有没有一种方法可以全局声明它并在我的所有应用程序中重用它？

Answer 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}/>
 )
}

如何在每个组件中不重复反应 i18next

how to not duplicate react i18next in each component

i18next

reactjs

react-i18next