For det bredest mulige publikum bør din app kommunikere på en række sprog. Find ud af, hvordan du gør denne opgave mindre skræmmende.
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.
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 installer react-intl
For at installere det ved hjælp af garn, kør denne kommando:
garn tilføj 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, inkluderer Formateret besked og IntlProvider komponenter.
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:
eksportkonst messagesInFrench = {
hilsen: "Bonjour {navn}"
}
eksportkonst messagesInItalian = {
hilsen: "Buongiorno {navn}"
}
Denne eksempeloversættelsesfil indeholder to oversættelsesobjekter: beskeder på fransk og beskeder på italiensk. Du kan erstatte pladsholderen {navn} i hilsen streng ved kørsel med en dynamisk værdi.
For at bruge oversættelserne i din applikation skal du indpakke din applikations rodkomponent med IntlProvider komponent. IntlProvider-komponenten tager tre Reager rekvisitter: lokalitet, 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:
importere Reagere fra"reagere";
importere ReactDOM fra"reager-dom/klient";
importere App fra"./App";
importere { IntlProvider } fra"react-intl";
importere { messagesInFrench } fra"./oversættelse";
ReactDOM.createRoot(dokument.getElementById("rod")).render("fr" messages={messagesInFrench} defaultLocale="da">
</IntlProvider>
</React.StrictMode>
);
Dette eksempel passerer fr lokalitet, den beskeder på fransk oversættelse og en standard da lokalitet til IntlProvider komponent.
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 Formateret besked komponent. Det Formateret besked komponent tager en id prop svarende til et meddelelses-id i meddelelsesobjektet.
Komponenten tager også en standardmeddelelse og værdier rekvisit. Det standardmeddelelse prop angiver en reservemeddelelse, hvis en oversættelse ikke er tilgængelig for den aktuelle lokalitet, mens værdier prop giver dynamiske værdier for pladsholderne i dine oversatte meddelelser.
For eksempel:
importere Reagere fra"reagere";
importere { FormattedMessage } fra"react-intl";fungereApp() {
Vend tilbage (
id="hilsen"
defaultMessage="Godmorgen {navn}"
værdier={{ navn: 'John'}}
/>
</p>
</div>
);
}
eksportStandard App;
I denne kodeblok er id rekvisit af Formateret besked komponent bruger hilsen nøgle fra beskeder på fransk objekt, og værdier prop erstatter {navn} pladsholder med værdien "John".
Formatering af tal med komponenten FormattedNumber
React Intl leverer også Formateret nummer komponent, 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.
Her er nogle eksempler:
importere Reagere fra"reagere";
importere { Formateret antal } fra"react-intl";fungereApp() {
Vend tilbage (
Decimal: <Formateret nummerværdi={123.456}stil="decimal" />
</p>
Procent: <Formateret nummerværdi={123.456}stil="procent" />
</p>
</div>
);
}
eksportStandard App;
Dette eksempel bruger Formateret nummer komponent, der accepterer en værdi prop, der angiver det tal, du vil formatere.
Bruger stil prop, kan du tilpasse udseendet af det formaterede tal. Du kan indstille stil støtte til decimal, procent, eller betalingsmiddel.
Når du indstiller stil prop til valuta, den Formateret nummer komponent formaterer tallet som en valutaværdi ved hjælp af koden angivet i betalingsmiddel rekvisit:
importere Reagere fra"reagere";
importere { Formateret antal } fra"react-intl";fungereApp() {
Vend tilbage (
Pris: <Formateret nummerværdi={123.456}stil="betalingsmiddel"betalingsmiddel="USD" />
</p>
</div>
);
}
eksportStandard App;
Det Formateret nummer komponent formaterer nummeret i kodeblokken ovenfor ved hjælp af betalingsmiddel stilen og USD valutakode.
Du kan også formatere tal med et bestemt antal decimaler ved hjælp af minimumFractionDigits og maximumFractionDigits rekvisitter.
Det minimumFractionDigits prop angiver det mindste antal brøkcifre, der skal vises. I modsætning hertil maximumFractionDigits prop angiver det maksimale antal brøkcifre.
Hvis et tal har færre brøkcifre end det angivne minimumFractionDigits, React Intl vil fylde det med nuller. Hvis tallet har flere brøkcifre end det angivne maximumFractionDigits, vil biblioteket runde tallet op.
Her er et eksempel, der viser, hvordan du kan bruge disse rekvisitter:
importere Reagere fra"reagere";
importere { Formateret antal } fra"react-intl";fungereApp() {
Vend tilbage (
værdi={123.4567}
minimumFractionDigits={2}
maximumFractionDigits={3}
/>
</p>
</div>
);
}
eksportStandard 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. Det Formateret dato komponent giver en enkel og effektiv måde at formatere datoer på. Det fungerer på samme måde som dato-tid-biblioteker, der formaterer datoer, såsom Moment.js.
FormattedDate-komponenten tager mange rekvisitter, som f.eks 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:
importere Reagere fra"reagere";
importere { Formateret dato } fra"react-intl";fungereApp() {
konst i dag = nyDato();Vend tilbage (
I dagdatoen er
værdi={i dag}
dag="numerisk"
måned ="lang"
år ="numerisk"
/>
</p>
</div>
);
}
eksportStandard App;
I dette eksempel er værdi prop bruger den aktuelle dato. Også ved at bruge dag, måned, og år rekvisitter, angiver du, 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"
- anden: "numerisk", "2-cifret"
- tidszonenavn: "kort lang"
Du kan også bruge Formateret dato komponent til at formatere og vise tid:
importere Reagere fra"reagere";
importere { Formateret dato } fra"react-intl";fungereApp() {
konst i dag = nyDato();Vend tilbage (
Klokken er
værdi={i dag}
time="numerisk"
minut="numerisk"
sekund="numerisk"
/>
</p>
</div>
);
}
eksportStandard 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.
