PWA工作室(威尼斯)如何添加tralates到网站?react-i18next现在不起作用

Question

我不明白为什么这段代码不能在pwa工作室中工作。我试图找到解决这个问题的办法，但在这个问题上什么也没找到。

我已经将i18n导入到index.js中。它在一个简单的React应用程序上工作，但在PWA Studio上不工作。也许我把它连接错了，或者我把文件和翻译放错了地方。目前，我还无法了解它在PWA工作室是如何工作的。

---

i18n.js文件

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
// the translations
// (tip move them in a JSON file and import them)
const resources = {
en_US: {
translation: {
"Welcome to React": "Welcome to React and react-i18next"
}
}
};
i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
resources,
lng: "en",
keySeparator: false, // we do not use keys in form messages.welcome
interpolation: {
escapeValue: false // react already safes from xss
}
});
export default i18n;

---

我的自定义组件并包括翻译它们：

import React, { Suspense } from 'react';
import {mergeClasses} from "@magento/venia-ui/lib/classify";
import defaultClasses from './socials.css';
import Buttons from "./buttons";
import { useTranslation } from 'react-i18next';
const Socials = props => {
const classes = mergeClasses(defaultClasses, props.classes);
const { t, i18n } = useTranslation();
return (
<div className={classes.block}>
<div className={classes.auth}>
<div className={classes.top}>
Welcome back to React
**<h1>{t('Welcome to React')}</h1>**
</div>
<span className={classes.bottom}>
Log in with a single react account.
</span>
</div>
<Buttons innerText='enter' />
<span className={classes.or}>or</span>
</div>
);
};
export default Socials;

Answer 1

您有两个问题：

1. 将lng值更改为en_US，使其与资源的键值相同
2. 通过I18nextProvider包装您的应用程序

对于另一个解决方案，PWA Studio提供国际化技术。对于Magento版本2.4，使用PWA Studio的storeSwitcher，开发版本具有完整功能的所有依赖项。