我有一个基于 React 的应用程序，并使用 i18next 的 Trans 组件进行翻译。
假设我们有一个用户注册表单，我们想通过显示以下文本来确认已创建新帐户：
名为NAME的用户已创建。
其中NAME由用户提供并以粗体显示。
我现在的反应代码如下：
<Trans i18n={i18next} i18nKey="userCreated" values={{name: 'Tom'}}>
User with name <strong>{{name}}</strong> has been created.
</Trans>
和以下翻译字符串
"userCreated": "User with name <1>{{name}}</1> has been created.",
对于一个简单的情况，name: 'Tom'它工作正常并显示
名为Tom的用户已创建。
不过我想让用户在他们的名字中使用特殊字符。当我改名时Tom&Jerry我得到
Tom&Jerry已创建具有名称的用户。
经过一些研究后，我认为问题在于 i18next 和 React 都转义了它们的输入，因此名称被转义了两次。i18next.init我通过添加以下选项关闭了 i18next 转义
interpolation: {escapeValue: false},
这解决了汤姆和杰瑞的情况：
名为Tom&Jerry 的用户已创建。
但有一些输入完全破坏了它，例如设置name: 'Tom<'像这样的渲染（名称后面的所有内容都是粗体）：
名为Tom 的用户已创建。
设置name: '<Tom>'给了我：
已创建具有名称的用户。
（根本没有显示名字）。我希望它像这样渲染： …
我正在尝试输入要使用 i18next 进行翻译的对象数组，但变量 navItems 中出现以下消息，我在其中声明 i18next 然后迭代该数组Type 'NavItemProps[]' does not satisfy the constraint 'string | TemplateStringsArray'. Property 'raw' is missing in type 'NavItemProps[]' but required in type 'TemplateStringsArray'
以及地图内的属性“map”message does not exist on type 'string | object | (string | object)[]'. Property 'map' does not exist on type 'string'
我用它作为通过此链接输入 i18next 的参考，但没有成功i18next: Map an array ofobjects in TypeScript
成分
const DesktopNav = ({hasBackground}: DesktopNavProps) => {
const {t} = useTranslation('navbar')
const linkColor = useColorModeValue(
hasBackground ? 'black' …我不能在标签内使用 i18n 中的 t （也不能在任何 html 标签内使用），而且我不明白为什么，如果我在 jsx 中的标签之外使用它，它可以正常工作并从我的 json 文件中获取翻译。
代码示例：
<label htmlFor={"username"}>{t("Username")}</label>
我收到错误消息：类型“DefaultTFuncReturn”不可分配给类型“ReactI18NextChild |” 可迭代'。类型“object”不可分配给类型“ReactI18NextChild |” 可迭代'。
有没有人遇到过类似的问题，你知道如何解决吗？
让我先说我有一个“有效”的解决方案，部分来自上一个线程：
我的目标是使用本地化/国际化技术将持续时间（以毫秒为单位）转换为人类可读的。输入值以毫秒为单位并且是一个移动目标，因为它是 ETA（估计到达时间）而不是确定的到达时间。它不断地重新计算。
我想出的作品。我正在寻找的是可以利用momentjs 的东西（因为它已经有一个本地化系统）。它不必特别是momentjs，但我想要一些更优雅的选择，尤其是在本地化方面。我也使用并因此可以访问i18next提供的任何内容。
这是当前解决方案的简化版本（它位于实用程序函数的对象字面量中）：
function duration (millis) {
// in actual code, a function "i18n.t(key)" would return a properly
// localized string. Instead, I'll just store English strings in an object
var mockTranslation = {
hoursLabel: "hr",
minutesLabel: "min",
secondsLabel: "s"
}
millis = parseInt(millis);
function msToTime(duration) {
var milliseconds = parseInt((duration%1000)/100)
, seconds = parseInt((duration/1000)%60)
, minutes = parseInt((duration/(1000*60))%60)
, hours = parseInt((duration/(1000*60*60))%24);
hours = (hours …我正在使用 HTML5 和 CSS 创建一个网站，而不是使用 CMS。我的下一个目标是用多种语言制作网站，所以我搜索并找到了许多图书馆。我是新手，我选择了最简单的一个或者有更多评论、例子的那个......
所以我选择了 i18next，但我也尝试了 i18n、i18next.amd ......现在我被卡住了，因为我正在学习一些教程并且无法完成这项工作......每次我收到这个错误
未捕获的 ReferenceError: i18n 未定义
所以我创建了一个空项目来完成这项工作并学习如何去做。这个新项目真的很轻。结构是：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/i18next.min.js" ></script>
<script type="text/javascript">
var options ={
lng: "en" ,
resGetPath: './../locales/__lng__/__ns__.json'
};
i18n.init(options, function(t) {
$(".nav").i18n();
});
</script>
<ul class="nav">
<li><a href="#" data-i18n="nav.home">asd</a></li>
<li><a href="#" data-i18n="nav.page1">asd</a></li>
<li><a href="#" data-i18n="nav.page2">asd</a></li>
</ul>
</body>
</html>所有的 JSON 文件都是这样的：
{
"app": {
"name": "i18next"
}, …我正在使用 i18next 来处理我正在处理的项目中的翻译，我发现当我将一个字符串传递给包含 的翻译时/，它正在被转换为 unicode 十六进制代码/
我设置title为：
const title = '2/Double/Twin/Triple/Quadrupple'
翻译的名称如下：
{i18n.t('foo', {
title,
amount: '$18'
})}
翻译设置如下：
{
"foo": "foo bar {{title}} howdee {{amount}}"
}
但是输出是：
Foo bar 2/Double/Twin/Triple/Quadrupple howdee $18
如何确保字符不会转换为其等效的十六进制代码？
我需要在nextjs项目中从locize集成 i18 本地化。我发现react-i18next与 i18 和 locize 配合得很好，但不能与 nextjs 集成。另一方面，next-i18next适用于 nextjs 和本地 i18 文件，但似乎不适用于 locize（几乎没有示例）。还有其他解决方案可以使用吗？这可以通过 next-i18next 完成吗？
谢谢。
概述
需要国际化的 React 应用程序，使用i18next来实现。
问题
在项目结构中有constants.js（Plain JS），我试图在其中i18next.t()进行翻译。请查找相关代码。
索引.js
import React,{Suspense} from "react";
import ReactDOM from "react-dom";
import "./style/index.scss";
import App from "./app";
import createSagaMiddleware from "redux-saga";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import rootReducer from "./reducers";
import rootSaga from "./sagas";
import './i18n';
const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);
ReactDOM.render(<Provider store={store}>
<App store={store} />
</Provider>,
document.getElementById("root")
);
应用程序.js
import React from "react";
import "./App.scss"; …我必须在端点上发送当前语言。但是从 Cookie 获取语言会返回 undefined inside getServerSideProps。
export async function getServerSideProps(context) {
const lang = await Cookie.get('next-i18next')
const res = await fetch(`endpoint/${lang}`)
const data = await res.json()
return {
props: { data },
}
}
export default Index;
将 cookie 放入内部的正确方法是什么getServerSideProps？
提前致谢！
目前我使用 Next.js 和 Next-i18next for I18N，但我知道 React/i18next 实现基本相同。
我遇到的问题是我需要在某些翻译文本中插入下一个 Link 组件，但是根据语言（英语与德语），文本和链接的顺序会发生变化。例如，我正在努力处理的文字是：“接受数据政策”与“Datenschutzerklärung akzeptieren”
目前，我通过在翻译 JSON 文件中为文本和链接创建两个值，然后根据当前语言交换位置来快速修复。显然，这不是一个可持续的解决方案。我曾尝试使用“Trans”组件，但这显示了一些意外行为，其中翻译仅在页面刷新后才开始，否则您会看到 Trans 组件内的文本。
例子：
function LinkText({ href, children}) {
return <Link to={href || ''}>{children}</Link>;
}
return (
<Trans i18nKey="sentence">
text before link
<LinkText href="/data-policy">{t("dataPolicy")}</LinkText>
text after link
</Trans>
);
和有问题的 JSON：
{
"sentence": "agree to our <1><0/></1>",
"dataPolicy": "data policy"
}
这是我为在 React 中复制问题而制作的 CodeSandbox 的链接：链接
（PS i18next 的实现目前似乎并没有有效地替换 Codesandbox 中的语言，但我将其包含在内，因为代码是用于 MWE）
在此先感谢您的帮助，这让我发疯了。
i18next ×10
reactjs ×6
javascript ×4
next.js ×4
html ×1
json ×1
momentjs ×1
typescript ×1
unicode ×1