PWA studio (venia) как добавить траслат на сайт? реакция-i18следующая не работает сейчас - PullRequest
Новая
       37

PWA studio (venia) как добавить траслат на сайт? реакция-i18следующая не работает сейчас

0 голосов
/ 15 апреля 2020

Я не понимаю, почему этот код не работает внутри pwa-studio. Я пытался найти решение, чтобы решить проблему, но ничего не нашел по этой теме c.

Я импортировал i18n в индекс. js. Он работает над простым React-приложением, но не работает в PWA Studio. Возможно, я неправильно его подключаю или неправильно разместил файл с переводами. Пока я не могу понять, как это работает в PWA Studio.

i18n. js file 

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;
...