React-Internationalisierung react-i18next ausführliche Erklärung

{
    "Kopfzeile": {
        "register":"Registrieren",
        "signin":"Anmelden",
        "home": "Zuhause"
    },
    "Fußzeile": {
        "Detail" : "Alle Rechte vorbehalten @ React"
    },
    "heim": {
        "hot_recommended": "Heiß empfohlen",
        "new_arrival": "Neuankömmling",
        "joint_venture": "Gemeinschaftsunternehmen"
    }
}

{
    "Kopfzeile": {
        "register":"Registrieren",
        "signin":"Anmelden",
        "home": "Zuhause"
    },
    "Fußzeile": {
        "Detail": "Urheberrecht @ React"
    },
    "heim": {
        "hot_recommended": "Heiß empfohlen",
        "new_arrival": "Neuankömmling",
        "joint_venture": "Gemeinschaftsunternehmen"
    }
}

importiere i18n von „i18next“;
importiere { initReactI18next } von 'react-i18next';

importiere translation_en aus „./en.json“;
importiere translation_zh aus „./zh.json“;

const Ressourcen = {
    de:
        Übersetzung: translation_en,
    },
    de: {
        Übersetzung: translation_zh,
    },
};

i18n.use(initReactI18next).init({
    Ressourcen,
    lng: "zh",
    Interpolation:
        Escape-Wert: false,
    },
});

Standard-i18n exportieren;

importiere React von „react“;
importiere ReactDOM von „react-dom“;
importiere './index.css';
App aus „./App“ importieren;
importiere './i18n/config'; // Referenzkonfigurationsdatei ReactDOM.render(
    <Reagieren.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

importiere React von „react“;
Stile aus „./Home.module.css“ importieren;

//Einführung der HOC-High-Order-Funktion withTranslation und der i18n ts-Typdefinition WithTranslation 
importiere { mitÜbersetzung, MitÜbersetzung } von "react-i18next"

Klasse HomeComponent erweitert React.Component<WithTranslation> {
    rendern() {
        const { t } = diese.props;
        Rückkehr <>
           <h1>{t('header.home')}</h1>
           <ul>
               <li>{t('home.hot_recommended')}</li>
               <li>{t('home.neue_Ankunft')}</li>
               <li>{t('Heimat.Joint_Venture')}</li>
           </ul>
        </>
    }
}

export const Home = withTranslation()(HomeComponent); // Verwenden Sie die höherwertige Funktion withTranslation, um die Dateneinfügung der Sprachkonfiguration abzuschließen.

importiere React von „react“;
importiere { useTranslation, Trans } von 'react-i18next'

exportiere const Home: React.FC = () => {
    const { t } = useTranslation()
    zurückkehren (
		<div>
			<h1>{t('header.home')}</h1>
			<ul>
				<li>{t('home.hot_recommended')}</li>
				{/* Es gibt einen anderen Weg */}
				<li><Trans>Zuhause.Neuankömmling</Trans></li>
			</ul>
		</div>    
    );
};

importiere i18n von „i18next“;

const changeLanguage= (Wert) => {
	i18n.changeLanguage(val); // der Wert des Parameters val ist „en“ oder „zh“
};

importiere React von „react“;
importiere { useTranslation } von 'react-i18next'

export const Home: React.FC = () => {
    const { t, i18n } = useTranslation()
    zurückkehren (
		<button onClick={()=>i18n.changeLanguage(i18n.language=='en'?'zh':'en')}>{i18n.language=='en'?'zh':'en'}</button>
    );
};