React Academy · Lektion

Använda useTranslation-hooken

Ersätt hårdkodade strängar med t()-anrop och organisera JSON-filerna för översättningar.

Lektion 2 av 413 steg

Använda useTranslation-hooken är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen kommer ni att använda useTranslation-hooken för att komma åt funktionen t(), översätta strängar i komponenter och organisera JSON-filer för översättningar efter namespace.

useTranslation-hooken

Anropa useTranslation() inuti en komponent för att få översättningsfunktionen `t` och instansen `i18n`. Ange namnet på ett namespace om ni använder namespace-baserade översättningar.

import { useTranslation } from 'react-i18next';

function Header() {
  const { t } = useTranslation('common');
  return <h1>{t('app_title')}</h1>;
}

Grundläggande översättningsnycklar

Skapa en JSON-fil för varje språk och namespace. Nycklarna är strängar som kan nås med punktnotation. Platta nycklar är enkla, medan nästlade nycklar använder punktnotation.

// public/locales/en/common.json
{
  "app_title": "My App",
  "nav": {
    "home": "Home",
    "about": "About"
  }
}

Nycklar med punktnotation

Åtkomst till nästlade nycklar med punktnotation i funktionen t(): `t('nav.home')` läser `nav -> home` från JSON-filen.

const { t } = useTranslation('common');
return <a href="/">{t('nav.home')}</a>;

Standardnamespace

Konfigurera en `defaultNS` vid initiering av i18n så att ni kan anropa useTranslation() utan argument och låta nycklar automatiskt lösas mot standardnamespacet.

i18n.init({ defaultNS: 'common', ... });

// No namespace argument needed
const { t } = useTranslation();
t('app_title'); // resolves in 'common'

Åtkomst till flera namespace

Skicka en array till useTranslation för att komma åt flera namespace. Prefixera nycklar med namespacet följt av ett kolon.

const { t } = useTranslation(['common', 'auth']);

t('common:app_title');
t('auth:login');

Trans-komponenten för JSX-innehåll

När en översatt sträng innehåller HTML eller React-komponenter använder ni Trans-komponenten. Den har stöd för platshållare som kopplas till React-komponenter.

import { Trans } from 'react-i18next';

// JSON: "tos": "Read our <1>Terms</1>"
<Trans i18nKey="tos">
  Read our <a href="/terms">Terms</a>
</Trans>

Struktur för översättningsfiler

Organisera JSON-filer som `public/locales/{lang}/{ns}.json`. Håll nycklarna semantiska och gruppera dem efter funktion. Undvik djupt nästlade nycklar — två nivåer räcker vanligtvis.

public/
  locales/
    en/
      common.json
      auth.json
      dashboard.json
    tr/
      common.json
      auth.json

Byta språk under körning

Använd `i18n.changeLanguage(lng)` för att byta aktivt språk programmatiskt. React-komponenter som använder useTranslation renderas automatiskt om.

const { i18n } = useTranslation();

<button onClick={() => i18n.changeLanguage('tr')}>Turkish</button>

Identifiera det aktiva språket

Läs `i18n.language` för att hämta den aktuella aktiva lokalen. Använd den för att visa en flagga eller markera knappen för det aktiva språket.

const { i18n } = useTranslation();
return <p>Current lang: {i18n.language}</p>;

Snabbkontroll

Hur kommer ni åt den nästlade översättningsnyckeln 'nav.home' från namespacet 'common'?

Besvara frågan i den interaktiva lektionen

Sammanfattning

useTranslation ger er funktionen t(). Organisera nycklar i JSON-filer per namespace. Använd punktnotation för nästlade nycklar. Byt språk med i18n.changeLanguage. Använd Trans-komponenten för strängar som innehåller JSX.

Nästa steg

Nästa lektion: **Pluralisering och interpolering** — ni kommer att hantera pluralformer baserade på antal och infoga dynamiska värden i översatta strängar.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Använda useTranslation-hooken” gratis?

Ja – hela texten till ”Använda useTranslation-hooken” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Använda useTranslation-hooken”?

Ersätt hårdkodade strängar med t()-anrop och organisera JSON-filerna för översättningar. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Använda useTranslation-hooken”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Konfigurera react-i18next
Använda useTranslation-hooken
Pluralisering och interpolation
Språkväljare och lazy loading av översättningar

← Tillbaka till React Academy