请帮我。
错误 -
i18next::pluralResolver：您的环境似乎与 Intl API 不兼容，请使用 Intl.PluralRules 填充。将回退到兼容性JSON v3 格式处理
代码 -
import i18n from "i18next";
import english from './englist.json';
import thai from './thai.json';
import { initReactI18next } from "react-i18next";
i18n.use(initReactI18next).init({
lng:'th',
fallbackLng: 'en',
resources:{
en:english,
th:thai
},
interpolation: {
escapeValue: false
},
react:{
useSuspense:false,
}
});
export default i18n;
我正在使用i18next为我的博客提供i18n电源.它在纯文本内容上运行良好,但是当我尝试翻译包含HTML标记的内容时,它在翻译文本时显示原始标记.
举个例子,这里是一个帖子的标记片段,它没有按预期工作:
<div class="i18n" data-i18n="content.body">
In Medellín they have many different types of <i>jugos naturales</i> (fruit juice) ... <br />
<br />
...
</div>
翻译代码如下所示:
var resources = {
"en": ...,
"es": {
"translation": {
"content": {
"body": "En Medellín hay varios tipos diferentes de <i>jugos naturales</i> ... <br /><br /> ... "
}
}
}
}
i18n.init({"resStore": resources}, function( t ) {
$('.i18n').i18n();
});
呈现翻译时,HTML标记将被转义并作为文本输出:
En Medellín hay varios tipos diferentes de <i>jugos naturales</i>...<br /><br />
如何让i18next更改已翻译元素的HTML？
我想在我的jQuery Mobile和jQuery webside上使用国际化选项.我尝试使用http://i18next.com上的文档生成一个示例,但似乎我失败了.有没有人有i18next的经验？
这是我的例子:
index.html的:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="js/i18next-1.5.6.min.js" type="text/javascript"></script>
<script src="js/translation.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<div id="headline1" data-i18n="headline"></div>
<table width="100%" border="0" id="menu1" class="menu">
<tr id="surname">
<td width="50%" data-i18n="menu.surname"></td>
<td width="50%"> </td>
</tr>
<tr id="firstName">
<td width="50%" data-i18n="menu.firstName"></td>
<td width="50%"> </td>
</tr>
</table>
</div>
</div>
</body>
</html>
翻译文件:/locales/de/translation.json
{
"menu": {
"surname": "Name:",
"firstName": "Vorname:"
},
"headline": "Daten:",
"headline_1": "Daten Allgemein:",
"headline_2": "Daten Speziell:"
}
/locales/en/translation.json …
我正在使用 next.JS 和包 next-i18next 构建一个多语言网站。它进展顺利，除了一件事我不确定什么是最好的方法。我希望我的静态路由也将被翻译（不仅是页面内容），例如：
example.com/en/home -> example.com/pt-br/inicio
example.com/en/contact -> example.com/pt-br/contato
我知道我可以创建目录 (en/pt-br) 并在其中插入页面（例如：home.js、contact.js 等在“/en/”和 inicio.js、contato.js 等在“/”中pt-br/")，这样在用户访问这些页面时很容易定义语言，但我需要创建 2 个几乎所有相同内容的文件（例如：“/en/home”和“/pt-br/inicio”）。所以我想知道是否有更好的解决方案？
谢谢！
我react-i18next在我的应用程序中使用效果很好，但是当我针对我的组件运行单元测试时：
const OptionList = ({
definition,
name,
status = EMutationStatus.IDLE,
onChange = () => null,
value = [],
}: IOptionListProps): React.ReactElement => {
const { t } = useTranslation();
const { options } = definition;
return (
<Select
name={name}
data-testid="optionList"
id={name}
placeholder={t('COMMON.PLEASE_SELECT')}
onChange={e => onChange(e.currentTarget.value)}
defaultValue={value[0]}
disabled={status === EMutationStatus.LOADING}
>
{options.map((option: string): React.ReactElement => {
return (
<option key={option} value={option}>
{option}
</option>
);
})}
</Select>
);
};
运行单元测试套件时它会抛出以下警告：
react-i18next:: You will need to pass in an 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-i18next';
import i18next from 'i18next';
// eslint-disable-next-line import/no-extraneous-dependencies
import { hot } from 'react-hot-loader';
import 'bootstrap/dist/css/bootstrap.css';
import '../../scss/app.scss';
import Router from './Router';
import store from './store';
import ScrollToTop from './ScrollToTop';
import { config as i18nextConfig } from '../../translations';
i18next.init(i18nextConfig);
class App extends Component {
constructor() {
super(); …我正在使用 jest 和 react-testing-library 为我使用 React 完成的前端应用程序进行单元测试。在我使用 react-i18next -library 添加国际化之前，我的单元测试运行良好。现在，当我运行测试时，它似乎没有找到/使用翻译文件，并且所有应该读取内容的地方都留空。我使用的是带有钩子的最新 React 版本，而不是 React.Component 我使用的是这种“const-components”：
const ComponentName = ({t}) => {
return(
<p>{t('example')}</p>
)}
export default ComponentName;
国际化在实际页面中完美运行，但由于未使用翻译文件而导致单元测试失败，所以我认为问题在于正确模拟翻译文件。我只是使用 this.variableName 类型的解决方案为较旧的反应找到一些建议解决方案，但这对我没有多大帮助。
我试图用 jest.fn() 模拟它，但我不确定哪个函数是那个，我应该模拟哪个函数以及如何从测试中正确利用 useTranslation() 函数。
import React from 'react';
import { useTranslation, Trans } from 'react-i18next';
import { render } from '@testing-library/react';
import ComponentName from './ComponentName';
import '../locales/i18n';
test('renders all documents in the list', () => {
const mockUseTranslation = jest.fn();
const { t, i18n } = mockUseTranslation();
// const t …internationalization i18next reactjs jestjs react-testing-library
我正在开发使用反应的多语言应用程序,i18next和i18next-browser-languagedetector.
我通过以下方式初始化i18next:
i18n
.use(LanguageDetector)
.init({
lng: localStorage.getItem(I18N_LANGUAGE) || "pt",
fallbackLng: "pt",
resources: {
en: stringsEn,
pt: stringsPt
},
detection: {
order: ["localStorage", "navigator"],
lookupQuerystring: "lng",
lookupLocalStorage: I18N_LANGUAGE,
caches: ["localStorage"]
}
});
export default i18n;
我已经实现了一个语言选择器,它只是改变localStorage了用户选择的值.
这是正确的做法吗？
我问,因为即使这有效,我觉得我通过设置"作弊" localStorage.getItem(I18N_LANGUAGE) || "pt"并且我没有按照我的意愿使用语言检测.
我想翻译我的颜色，但不知道该怎么做。
const Item = memo(({ color, index, lastIndex, translateName, style, activeColor, onPress }: IColorItem) => {
return (
<Text>{translateName}</Text>
)
// @ts-ignore
}, isEq);
const Colors = ({ colors, style, activeColor, onPress }: IColors) => {
const { t } = useTranslation();
const renderItem: ListRenderItem<ColorsType> = ({ item, index }) => (
<Item
color={item}
translateName={t('colors.color', { color: item })}
index={index}
style={style}
activeColor={activeColor}
lastIndex={colors.length - 1}
onPress={onPress}
/>
)
return (
<View style={s.container}>
<FlatList
data={colors as ColorsType[]}
renderItem={renderItem}
style={s.flatList}
keyExtractor={(item, i) …我正在调查i18next本地化库的可能性.
现在我有以下代码(完整的小提琴在这里):
HTML
<div data-i18n="title"></div>
<input placeholder="Hello" value="name">
<div class="holder"></div>
<button class="lang" data-lang="en">Eng</button>
<button class="lang" data-lang="ch">Chi</button>
JS
$(document).ready(function () {
i18n.init({
"lng": 'en',
"resStore": resources,
"fallbackLng" : 'en'
}, function (t) {
$(document).i18n();
});
$('.lang').click(function () {
var lang = $(this).attr('data-lang');
i18n.init({
lng: lang
}, function (t) {
$(document).i18n();
});
});
});
它翻译所有text元素,但问题是我无法翻译custom attributes.例如,div中的文本被翻译,但我无法理解如何翻译自定义属性,如placeholder和value.
另一个问题是我的翻译方式.每当点击一个按钮时Chi,Eng我正在初始化翻译(但我不确定这是一种正确的方法).编辑我想我找到了如何解决这个问题(我需要使用setLng):i18n.setLng(lang, function(t) { ... })
i18next ×10
reactjs ×6
javascript ×5
react-native ×2
translation ×2
html ×1
jestjs ×1
localization ×1
next.js ×1