[英]Using react i18next on all nested components
I have a question regarding the multi-language support for complex React application.我有一个关于复杂React应用程序的多语言支持的问题。 All examples and documentation are based on "flat" application without nested/child components.所有示例和文档都基于没有嵌套/子组件的“平面”应用程序。
<i18n>
<App>
translate('base')(
<Base>
<Child1 />
<Child2 />
{t('Hello')}
</Base>
)
</App>
</i18n>
Should I wrap every child component with translate
HOC?我应该用translate
HOC 包装每个子组件吗?
Is there some other way to pass the translation function down to the child components?还有其他方法可以将翻译功能传递给子组件吗?
I had the same problem not long ago.不久前我遇到了同样的问题。 There are 4 solutions I found for this.我为此找到了 4 个解决方案。
Passing t
down to every component.将t
传递给每个组件。 This one is very annoying and leads to a lot of bugs because I was forgetting to pass it down all the time.这个很烦人,会导致很多错误,因为我一直忘记传递它。
Using the NamespacesConsumer context provided by react-i18next.使用 react-i18next 提供的 NamespacesConsumer 上下文。 This one is also really annoying and the syntax is sometimes too weird and repetitive.这个也很烦人,语法有时太奇怪和重复。 This can also be bad for performance because components might re-render often.这也可能对性能不利,因为组件可能会经常重新渲染。
Using the withNamespaces
HOC provided by react-i18next, this is a great option, it's easy to read and doesn't pollute your code with translation syntax.使用 react-i18next 提供的withNamespaces
HOC,这是一个很好的选择,它易于阅读并且不会因翻译语法而污染您的代码。 It's also more efficient than the previous two options.它也比前两个选项更有效。
This one is my favorite solution, I end up using i18next directly because you have access to t()
everywhere out of the box, without additional code.这是我最喜欢的解决方案,我最终直接使用 i18next,因为您可以在任何地方直接访问t()
,无需额外代码。
If you want to keep react-i18next, I would recommend you to use a HOC, it's way easier to debug, test and develop.如果你想保留 react-i18next,我建议你使用 HOC,它更容易调试、测试和开发。 But honestly, i18next is doing a better job in my own opinion.但老实说,在我看来,i18next 做得更好。 I initially use react-i18next because I thought it was the react way to go, but it is just a pain to use it, react-i18next has a lot of bugs and it's way more code to write.我最初使用 react-i18next 是因为我认为这是要走的反应方式,但使用它只是一种痛苦,react-i18next 有很多错误,而且要编写更多代码。 Using i18next is simple as this使用 i18next 很简单
import i18next from 'i18next';
i18next.t('parentKey.childKey');
You also can pass it down via regular props from outer component.您也可以通过外部组件的常规道具传递它。
Like having container components which gets wrapped with translate hoc and the inner components you just pass the t
function via props.就像使用 translate hoc 包裹的容器组件和内部组件一样,您只需通过 props 传递t
函数。
The best approach would be to wrap your main component with a React.Context and pass the t
prop as a context and have it accessible in each of your nested child components.最好的方法是用 React.Context 包装你的主组件,并将t
prop 作为上下文传递,并让它在每个嵌套的子组件中都可以访问。
I am using localization as well in my application like this.我也在这样的应用程序中使用本地化。
Pros:优点:
If you are using hooks , and not classes (like me) when coding your React components, then you can use the useTranslation
hook:如果您在编写 React 组件时使用hooks而不是类(像我一样),那么您可以使用useTranslation
hook:
import React from 'react';
import { useTranslation } from 'react-i18next';
export function MyComponent() {
const { t, i18n } = useTranslation();
// or const [t, i18n] = useTranslation();
return <p>{t('my translated text')}</p>
}
This, just like the withTranslation wrapper, requires importing (the hook) in every file which uses translations.这就像withTranslation包装器一样,需要在每个使用翻译的文件中导入(钩子)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.