使用React i18next我必须使用withTranslation吗？
使用React i18next，你不一定必须使用withTranslation。React i18next是一个用于国际化（i18n）的React库，它提供了一种方便的方式来在React应用中实现多语言支持。
withTranslation是React i18next提供的一个高阶组件（Higher-Order Component，HOC），它可以将翻译函数（t函数）注入到组件的props中，使得组件可以方便地进行国际化文本的翻译。
使用withTranslation的好处是，你可以直接在组件中使用t函数来获取翻译后的文本，而不需要手动引入i18n对象或者传递翻译函数作为props。这样可以简化代码，并提高开发效率。
然而，如果你不想使用withTranslation，也是可以的。React i18next提供了一种叫做useTranslation的钩子函数（Hook），它可以在函数组件中使用。通过useTranslation，你可以获取到翻译函数t，并在组件中使用它进行文本的翻译。
使用useTranslation的好处是，它更符合React函数组件的编程模式，而且不需要使用高阶组件的方式。如果你更喜欢使用函数组件，或者不想引入额外的高阶组件，可以选择使用useTranslation。
综上所述，使用React i18next时，你可以选择使用withTranslation或者useTranslation来获取翻译函数t，具体取决于你的个人喜好和项目需求。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云国际化服务：https://intl.cloud.tencent.com/
- 腾讯云全球应用加速（CDN）：https://intl.cloud.tencent.com/product/cdn
- 腾讯云全球负载均衡（CLB）：https://intl.cloud.tencent.com/product/clb
- 腾讯云对象存储（COS）：https://intl.cloud.tencent.com/product/cos
- 腾讯云容器服务（TKE）：https://intl.cloud.tencent.com/product/tke
- 腾讯云人工智能（AI）：https://intl.cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://intl.cloud.tencent.com/product/iot
- 腾讯云移动开发（MPS）：https://intl.cloud.tencent.com/product/mps
- 腾讯云数据库（TDSQL）：https://intl.cloud.tencent.com/product/tdsql
- 腾讯云区块链（BCS）：https://intl.cloud.tencent.com/product/bcs
- 腾讯云元宇宙（Metaverse）：https://intl.cloud.tencent.com/product/metaverse
相关·内容
3回答
i18next useTranslation钩子在辅助方法中的反应
javascript、reactjs、react-i18next
我用的是i18Next
我的index.tsx文件包含一些组件，我可以在那里使用翻译功能
index.js
import React, { Suspense } from 'react'
import ReactDOM from 'react-dom';
import * as utils from './Utils';
import './i18n';
import { useTranslation, withTranslation, Trans } from 'react-i18next';
...
co
浏览 1提问于2019-12-18得票数 9
回答已采纳
4回答
在组件外部使用来自react-i18next的t()
react-native、react-component、i18next、react-i18next
我在一个react原生应用程序中使用i18next和react-i18next，更具体地说是通过输入验证。我尝试将t()作为参数传递给no组件，但收到错误消息"TypeError: n is not a function. (In 'n('errorMessages.emailNoMatch')'，'n‘is undefined)“。任何建议都非常感谢，因为我对编码相对较新，并且我已经在这个问题上搜索了几天。
下面是i18n.js代码：
import i18next from 'i18next';
import common_de
浏览 2提问于2020-12-30得票数 3
5回答
在React I18next中添加到文本的链接
javascript、reactjs、localization、i18next、react-i18next
我对I18next有个问题。我不知道如何使链接到网站工作，以下是我的代码：
import React, { Suspense } from "react";
import i18n from "i18next";
import { initReactI18next, useTranslation, Trans } from "react-i18next";
const translationSwe = {
about: "Information",
example: "Exempel <br> <str
浏览 19提问于2022-01-18得票数 1
2回答
使用转换将-i18下一个值传递到.json中
reactjs、react-i18next、i18next-http-backend
我跟踪了这篇文章：。
现在，我想知道是否有方法将参数传递到从.json文件中提取的字符串中。
public/locales/en/transation.json
{
"GREETING": "Hello ${name}, nice to see you."
}
src/i18n.ts
import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import LanguageDetector from 'i18next-brows
浏览 6提问于2022-05-09得票数 1
回答已采纳
2回答
在返回方法中使用导入的函数(无效的钩子调用，反应js)
javascript、reactjs、react-hooks
Wassup的家伙
我有一个可重用组件，它通过字符串或绑定变量的键名将密钥转换成一种选择的语言。
通常我会使用标签，但由于不同的原因，我要用{t(‘.’)}替换当前的翻译。
以下是组件的代码：
import React from 'react';
import { useTranslation as defaultTranslation } from 'react-i18next';
import i18next from 'i18next';
export const useTranslation = (ns = 'common
浏览 4提问于2020-10-14得票数 0
回答已采纳
1回答
使用i18next react调用父函数中的子函数
reactjs、react-i18next
我使用React.createRef()调用子方法，就像这样
import Child from 'child';
class Parent extends Component {
constructor(props) {
super(props);
this.child = React.createRef();
}
onClick = () => {
this.child.current.getAlert();
};
render() {
return (
<div>
浏览 1提问于2020-09-29得票数 0
2回答
如何在React中使用i18next更改语言
javascript、reactjs、internationalization、i18next
我正在尝试将i18next翻译系统添加到我的React应用程序中，我已经完成了所有配置，但我似乎找不到如何更改语言(例如，使用select或按钮)。
我已经按照 easy guide完成了整个设置。但是没有关于如何手动更改语言的内容。而且，正如您所看到的，有一个用于更改语言的函数，但它位于一个函数组件中：
function Page() {
const { t, i18n } = useTranslation();
const changeLanguage = lng => {
i18n.changeLanguage(lng);
};
return ([...])
浏览 3提问于2020-03-31得票数 2
4回答
如何在react 18中改变语言？
reactjs、internationalization
首先，我初始化了i18next电感。
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
const resources = {
en: {
translation: {
'Welcome to React': 'Welcome to React and react'
}
},
de: {
translation: {
'Welcome to React
浏览 1提问于2021-01-19得票数 21
回答已采纳
6回答
在类组件中使用react-i18next
javascript、reactjs、i18next
我正在尝试使用react i18Next来翻译我的应用程序。我知道如何将它与简单的const组件一起使用，但不会在类中使用。
我和I18nextProvider一起工作。这是我的App.js文件。
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { I18nextProvider } from 'react-i1
浏览 10提问于2019-02-19得票数 26
回答已采纳
5回答
如何对连接的组件使用react-i18next
reactjs、react-redux、react-i18next
我想将react-i18next与我的react-redux连接组件一起使用，但不确定如何进行。
我简化了代码，显示了一个连接组件的示例：
import React from 'react';
import {connect} from 'react-redux';
import {userSelectors} from "./userSelectors";
interface IConnectedProps {
activeUserName: string | undefined;
}
export class LandingPage
浏览 0提问于2019-04-10得票数 21
4回答
如何使用钩子修复react i18next中的“未指定后备UI”
reactjs、react-hooks、react-i18next、react-suspense
我正在尝试使用i18next钩子在我的react组件中实现useTranslation，但它一直在说：
未登录错误:呈现时暂停测试，但未指定回退UI。
在树中添加更高的<Suspense fallback=...>组件，以提供要显示的加载指示符或占位符。
如何将<Suspense>添加到比我所拥有的更高的位置？我做错了什么？我该怎么解决这个问题？当我使用<Translation>组件时，它似乎工作得很好。当然，如果我关掉悬念并试图自己处理它的话，它似乎也能正常工作，但我认为，这样做违背了目的。我怎么才能让这件事真正发生呢？是否已将获取后端配置错误？
Tes
浏览 7提问于2019-12-24得票数 11
1回答
react-i18next:试图导入错误：“withNamespaces”不是从“Reacti-i18Next”导出的
reactjs、react-i18next
目前，我正在尝试使用react i18Next翻译我的应用程序，并使用多个文件进行翻译，因为我希望它是清晰的。这就是为什么我想使用withNamespaces而不是withTranslation，但是当我试图从‘Reacti-i18Next’导入withNamespaces时，我会得到以下错误消息：
试图导入错误：“withNamespaces”不是从“Reacti-i18Next”导出的。
这是我的密码：
import React, { Component } from 'react'
import {Link} from 'react-router-dom'
浏览 1提问于2021-03-15得票数 3
回答已采纳
1回答
如果指定了字符串类型，则没有重载匹配此调用。
javascript、reactjs、typescript、i18next、react-i18next
我用的是react-i18next和React和TypeScript。如果我尝试使用字符串文字和类型推断加载属性，它将正确工作。但是，如果我指定了string的类型，则会引发错误。
i18n.ts
import ns1 from './locales/en/translation.json';
import { initReactI18next } from 'react-i18next';
import i18n from 'i18next';
export const defaultNS = 'ns1';
export c
浏览 17提问于2022-01-14得票数 4
2回答
i18next::backendConnector: TypeError:只支持绝对URL
i18next、react-i18next
我正在使用i18next翻译我的NextJs应用程序。翻译在我的浏览器中加载非常好，但在我的控制台中仍然很少看到错误。
i18next: hasLoadedNamespace: i18next was not initialized undefined
i18next::translator: key "resources.welcome_string.value" for languages "en-US" won't get resolved as namespace "myStrings" was not yet loaded Th
浏览 15提问于2021-05-14得票数 3
1回答
i18next没有检测到变化
javascript、reactjs、i18next、react-i18next
当我更改应用程序的语言时，函数组件中的文本将被正确翻译。但是，对于在组件函数或类实用程序之外的常量，情况并非如此。
配置文件i18n.ts
const DETECTION_OPTIONS = {
order: ["navigator"]
}
i18next
.use(XHR)
.use(LanguageDetector)
.use(initReactI18next)
.init({
detection: DETECTION_OPTIONS,
resources,
ns: "common
浏览 14提问于2022-10-24得票数 0
2回答
如何在基本函数(非组件)中使用react-i18next？
react-i18next
我知道react-i18next适用于每个组件:函数式组件(使用useTranslation)和类组件(使用withTranslation())，但我不能在这样的基本函数中使用转换： const not_a_component = () => {
const { t } = useTranslation();
return t('translation')
};
const translate = not_a_component(); 错误钩子！ 谢谢！
浏览 239提问于2019-09-10得票数 3
回答已采纳
1回答
在I18nextProvider内部使用t函数？有可能吗？
reactjs、i18next、react-i18next
是否有一种在t中使用I18nextProvider函数的方法
翻译工作在一个子组件中。我想将一个可翻译的元素传递给SEO组件。
现在我得到了Uncaught ReferenceError: t is not defined错误。
这个例子更清楚地说明了我想要实现的目标：
**index.js**
import SEO from './components/villages/neighborhoods/SEO';
import { I18nextProvider, withTranslation } from 'react-i18next';
import i1
浏览 3提问于2020-11-18得票数 0
回答已采纳
3回答
如何使react-i18n转换文件在使用react-testing-library和jest完成的单元测试中使用？
reactjs、jestjs、internationalization、react-testing-library、i18next
我正在用jest和React -jest library为我的前端应用程序做单元测试，这是用React完成的。在我使用react-i18next -library添加国际化之前，我的单元测试工作得很好。现在，当我运行测试时，它似乎没有找到/使用翻译文件，并且所有应该读取内容的地方都留空了。我使用的是带有钩子的最新react版本，而不是React.Component，我使用了这种"const-components"：
const ComponentName = ({t}) => {
return(
<p>{t('
浏览 2提问于2019-07-22得票数 19
回答已采纳
2回答
如何在运行时在react-i18next中加载翻译文件
reactjs、internationalization、react-i18next
我正在使用react-i18next作为我的国际化库选择来构建一个react应用程序。虽然我能够将我的翻译文件分成多个文件并在我的应用程序中使用它们，但我担心随着时间的推移，这些翻译可能会增长，并且在构建时加载它们是一种低效的方法。他们的文档中说你可以手动加载翻译文件，但他们并没有有效地指导你如何这样做。
目前，我的代码是：
18n.js
import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI1
浏览 1提问于2020-11-12得票数 0
1回答
i18next/i18n更改语言不适用于整个网站
html、reactjs、typescript、internationalization、i18next
我正在做一个react-typescript应用程序，在那里我需要能够翻译网站。我使用的是i18next库。在主页中，用户可以使用运行此方法的按钮更改语言。 changeLang(lang:string):any{
i18next.changeLanguage(lang).then(() => {
this.props.close();
i18next.options.lng = lang;
});
} 这对于改变主页的语言非常有效。然而，当我转到下一页时，它又回到了原来的语言。我似乎不能让整个网
浏览 54提问于2021-03-26得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
