Sådan bruger du React Intl til at internationalisere dine React-applikationer

React Intl er et populært bibliotek, der giver et sæt komponenter og hjælpeprogrammer til at internationalisere React-applikationer. Internationalisering, også kendt som i18n, er processen med at tilpasse en applikation til forskellige sprog og kulturer.

Du kan nemt understøtte flere sprog og lokaliteter i din React-applikation med ReactIntl.

Indholdsfortegnelse

Installation af React Intl

For at bruge React Intl-biblioteket skal du først installere det. Du kan gøre dette med mere end én pakkehåndtering: npm, garn eller pnpm.

For at installere det med npm skal du køre denne kommando i din terminal:

 npm install react-intl

For at installere det ved hjælp af garn, kør denne kommando:

 yarn add react-intl

Sådan bruger du React Intl-biblioteket

Når du har installeret React Intl-biblioteket, kan du bruge dets komponenter og funktioner i din applikation. React Intl har lignende funktioner som JavaScript Intl API.

Nogle værdifulde komponenter, der tilbydes af React Intl-biblioteket, omfatter komponenterne FormattedMessage og IntlProvider.

FormattedMessage-komponenten viser oversatte strenge i din applikation, mens IntlProvider-komponenten leverer oversættelser og formateringsoplysninger til din applikation.

Du skal oprette en oversættelsesfil, før du kan begynde at bruge komponenterne FormattedMessage og IntlProvider til at oversætte din applikation. En oversættelsesfil indeholder alle oversættelserne til din ansøgning. Du kan oprette separate filer for hvert sprog og hver lokalitet eller bruge en enkelt fil til at indeholde alle oversættelserne.

For eksempel:

 export const messagesInFrench = {
    greeting: "Bonjour {name}"
}
  
export const messagesInItalian = {
    greeting: "Buongiorno {name}"
}

Denne eksempeloversættelsesfil indeholder to oversættelsesobjekter: messagesInFrench og messagesInItalian. Du kan erstatte pladsholderen {navn} i hilsenstrengen under kørsel med en dynamisk værdi.

Forståelse af understrenge i Python med eksempler

For at bruge oversættelserne i din applikation skal du indpakke din applikations rodkomponent med IntlProvider-komponenten. IntlProvider-komponenten tager tre React-rekvisitter: locale, defaultLocale og beskeder.

Landestandarden accepterer en streng, der specificerer brugerens lokalitet, mens defaultLocale angiver en reserve, hvis brugerens foretrukne lokalitet ikke er tilgængelig. Til sidst accepterer meddelelsesprop et oversættelsesobjekt.

Her er et eksempel, der viser, hvordan du kan bruge IntlProvider:

 import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { IntlProvider } from "react-intl";
import { messagesInFrench } from "./translation";ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <IntlProvider locale="fr" messages={messagesInFrench} defaultLocale="en">
      <App />
    </IntlProvider>
  </React.StrictMode>
);

Dette eksempel overfører fr-lokaliteten, messagesInFrench-oversættelsen og en standard en locale til IntlProvider-komponenten.

Du kan sende mere end ét lokalitet eller oversættelsesobjekt, og IntlProvider vil automatisk registrere brugerens browsersprog og bruge de relevante oversættelser.

For at vise oversatte strenge i din applikation skal du bruge FormattedMessage-komponenten. FormattedMessage-komponenten tager en id-prop svarende til et meddelelses-id i meddelelsesobjektet.

Komponenten tager også en defaultMessage og values prop. defaultMessage prop angiver en reservemeddelelse, hvis en oversættelse ikke er tilgængelig for den aktuelle lokalitet, mens værdierne prop giver dynamiske værdier for pladsholderne i dine oversatte meddelelser.

For eksempel:

 import React from "react";
import { FormattedMessage } from "react-intl";function App() {
  return (
    <div>
      <p>
        <FormattedMessage
          id="greeting"
          defaultMessage="Good morning {name}"
          values={{ name: 'John'}}
        />
      </p>
    </div>
  );
}
export default App;

I denne kodeblok bruger id-propen for FormattedMessage-komponenten hilsen-nøglen fra messagesInFrench-objektet, og values-prop erstatter pladsholderen {name} med værdien “John”.

Formatering af tal med komponenten FormattedNumber

React Intl leverer også FormattedNumber-komponenten, som du kan bruge til at formatere tal baseret på den aktuelle lokalitet. Komponenten accepterer forskellige rekvisitter til at tilpasse formateringen, såsom stil, valuta og minimums- og maksimumsbrøkcifre.

Sådan tilføjer du noter i Photoshop-filer

Her er nogle eksempler:

 import React from "react";
import { FormattedNumber } from "react-intl";function App() {
  return (
    <div>
      <p>
        Decimal: <FormattedNumber value={123.456} style="decimal" />
      </p>
      <p>
        Percent: <FormattedNumber value={123.456} style="percent" />
      </p>
    </div>
  );
}
export default App;

Dette eksempel bruger FormattedNumber-komponenten, som accepterer en værdiprop, der angiver det tal, du vil formatere.

Ved hjælp af stilrekvisiten kan du tilpasse udseendet af det formaterede tal. Du kan indstille stilprop til decimal, procent eller valuta.

Når du indstiller stilprop til valuta, formaterer FormattedNumber-komponenten tallet som en valutaværdi ved hjælp af den kode, der er angivet i valutaprop:

 import React from "react";
import { FormattedNumber } from "react-intl";function App() {
  return (
    <div>
      <p>
        Price: <FormattedNumber value={123.456} style="currency" currency="USD" />
      </p>
    </div>
  );
}
export default App;

Komponenten FormattedNumber formaterer tallet i kodeblokken ovenfor ved hjælp af valutastilen og USD-valutakoden.

Du kan også formatere tal med et bestemt antal decimaler ved at bruge minimumFractionDigits og maximumFractionDigits rekvisitter.

MinimumFractionDigits prop angiver det mindste antal brøkcifre, der skal vises. I modsætning hertil angiver maximumFractionDigits prop det maksimale antal brøkcifre.

Hvis et tal har færre brøkcifre end det angivne minimumFractionDigits, vil React Intl fylde det med nuller. Hvis tallet har flere brøkcifre end det angivne maksimumBrøkcifre, runder biblioteket tallet op.

Her er et eksempel, der viser, hvordan du kan bruge disse rekvisitter:

 import React from "react";
import { FormattedNumber } from "react-intl";function App() {
  return (
    <div>
      <p>
        <FormattedNumber
          value={123.4567}
          minimumFractionDigits={2}
          maximumFractionDigits={3}
        />
      </p>
    </div>
  );
}
export default App;

Formatering af datoer med FormattedDate-komponenten

Du kan formatere datoer på en måde, der er ensartet og let at læse ved hjælp af React Intl. FormattedDate-komponenten giver en enkel og effektiv måde at formatere datoer på. Det fungerer på samme måde som dato-tidsbiblioteker, der formaterer datoer, såsom Moment.js.

Sådan tilføjer eller fjerner du rækker og kolonner i Google Sheets

FormattedDate-komponenten tager mange rekvisitter, såsom værdi, dag, måned og år. Værdien prop accepterer den dato, du vil formatere, og de andre rekvisitter konfigurerer dens formatering.

For eksempel:

 import React from "react";
import { FormattedDate } from "react-intl";function App() {
  const today = new Date();
  return (
    <div>
      <p>
        Today's date is
        <FormattedDate
          value={today}
          day="numeric"
          month="long"
          year="numeric"
        />
      </p>
    </div>
  );
}
export default App;

I dette eksempel bruger værdien prop den aktuelle dato. Ved at bruge dag-, måned- og årsrekvisitter angiver du også, at du ønsker, at år, måned og dag skal vises i et langt format.

Udover dag, måned og år formaterer andre rekvisitter også datoens udseende. Her er rekvisitterne og de værdier, de accepterer:

år: “numerisk”, “2-cifret”
måned: “numerisk”, “2-cifret”, “smal”, “kort”, “lang”
dag: “numerisk”, “2-cifret”
time: “numerisk”, “2-cifret”
minut: “numerisk”, “2-cifret”
andet: “numerisk”, “2-cifret”
timeZoneName: “kort”, “lang”

Du kan også bruge FormattedDate-komponenten til at formatere og vise tid:

 import React from "react";
import { FormattedDate } from "react-intl";function App() {
  const today = new Date();
  return (
    <div>
      <p>
        The time is
        <FormattedDate
          value={today}
          hour="numeric"
          minute="numeric"
          second="numeric"
        />
      </p>
    </div>
  );
}
export default App;

Internationaliser dine React-applikationer til et bredere publikum

Du lærte, hvordan du installerer og opsætter React-Intl-biblioteket i din React-applikation. React-intl gør det nemt at formatere din React-applikations tal, datoer og valutaer. Du kan formatere data baseret på brugerens lokalitet ved hjælp af komponenterne FormattedMessage, FormattedNumber og FormattedDate.

React-udviklere laver ofte fejl, der kan føre til alvorlige konsekvenser. For eksempel manglende opdatering af tilstanden korrekt. Det er vigtigt at være opmærksom på disse almindelige fejl og rette dem tidligt for at undgå dyre problemer.