0

我不明白，为什么这段代码在 pwa-studio 中不起作用。我试图找到解决问题的方法，但没有找到关于这个主题的任何内容。

我已将 i18n 导入 index.js。它适用于一个简单的 React 应用程序，但它不适用于 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;
4

1 回答 1

0

你有两个问题：

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

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

于 2021-01-14T12:35:14.697 回答