PWA工作室(venia)如何将垃圾添加到网站？反应-I 18下一个现在不起作用了

Question

我不明白，为什么这段代码在pwa-studio中不起作用。我试图找到解决这个问题的办法，但在这个问题上没有发现任何东西。

我将i18n导入到index.js中。它正在开发一个简单的，但是它不适用于PWA Studio。也许我把它连接错了，或者我把文件和翻译放在了错误的地方。现在，我无法了解它在PWA Studio中的工作方式。

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提供国际化技术。对于MagentoVersion2.4，使用来自PWA-Studio的storeSwitcher，开发版本拥有整个函数的所有依赖项。