Hoe u React Intl gebruikt om uw React-applicaties te internationaliseren

React Intl is een populaire bibliotheek die een set componenten en hulpprogramma's biedt om React-applicaties te internationaliseren. Internationalisering, ook wel i18n genoemd, is het proces van het aanpassen van een applicatie aan verschillende talen en culturen.

U kunt eenvoudig meerdere talen en landinstellingen ondersteunen in uw React-toepassing met ReactIntl.

React Intl installeren

Om de React Intl-bibliotheek te gebruiken, moet u deze eerst installeren. Je kunt dit doen met meer dan één pakketbeheerder: npm, garen of pnpm.

Om het met npm te installeren, voert u deze opdracht uit in uw terminal:

npm installeer reactie-intl

Voer deze opdracht uit om het met garen te installeren:

garen add reactie-intl

Hoe de React Intl-bibliotheek te gebruiken

Nadat u de React Intl-bibliotheek hebt geïnstalleerd, kunt u de componenten en functies ervan in uw toepassing gebruiken. React Intl heeft vergelijkbare functies als het JavaScript Intl-API.

Enkele waardevolle componenten die door de React Intl-bibliotheek worden aangeboden, zijn onder meer de Opgemaakt bericht En IntlProvider componenten.

De component FormattedMessage geeft vertaalde tekenreeksen in uw toepassing weer, terwijl de component IntlProvider de vertalingen en opmaakinformatie aan uw toepassing levert.

U moet een vertaalbestand maken voordat u de componenten FormattedMessage en IntlProvider kunt gaan gebruiken om uw toepassing te vertalen. Een vertaalbestand bevat alle vertalingen voor uw toepassing. U kunt afzonderlijke bestanden maken voor elke taal en locale of een enkel bestand gebruiken om alle vertalingen te bevatten.

Bijvoorbeeld:

exporterenconst berichtenInFrans = {
 groet: "Bonjour {naam}"
}

exporterenconst berichtenInItaliaans = {
 groet: "Buongiorno {naam}"
}

Dit voorbeeldvertaalbestand bevat twee vertaalobjecten: berichtenInFrans En berichtenInItaliaans. U kunt de tijdelijke aanduiding vervangen {naam} in de groet tekenreeks tijdens runtime met een dynamische waarde.

Om de vertalingen in uw applicatie te gebruiken, moet u de rootcomponent van uw applicatie omwikkelen met de IntlProvider bestanddeel. De component IntlProvider heeft er drie nodig Reageer rekwisieten: plaats, standaardLokale, En berichten.

De locale-prop accepteert een tekenreeks die de locale van de gebruiker specificeert, terwijl de defaultLocale een terugval specificeert als de voorkeurslandinstelling van de gebruiker niet beschikbaar is. Ten slotte accepteert de berichtenprop een vertaalobject.

Hier is een voorbeeld dat laat zien hoe u IntlProvider kunt gebruiken:

importeren Reageer van"Reageer";
importeren ReactDOM van"react-dom/client";
importeren app van"./App";
importeren { IntlProvider } van"reageer-intl";
importeren { messagesInFrench } van"./vertaling";
ReactDOM.createRoot(document.getElementById("wortel")).veroorzaken(

"fr" messages={messagesInFrench} defaultLocale="en">

 </IntlProvider>
 </React.StrictMode>
);

Dit voorbeeld passeert de fr lokaal, de berichtenInFrans vertaling en een standaard nl lokaal naar de IntlProvider bestanddeel.

U kunt meer dan één landinstelling of vertaalobject doorgeven, en de IntlProvider detecteert automatisch de browsertaal van de gebruiker en gebruikt de juiste vertalingen.

Om vertaalde tekenreeksen in uw toepassing weer te geven, gebruikt u de Opgemaakt bericht bestanddeel. De Opgemaakt bericht onderdeel neemt een ID kaart prop die overeenkomt met een bericht-ID in het berichtenobject.

Het onderdeel neemt ook een defaultBericht En waarden prop. De defaultBericht prop specificeert een terugvalbericht als een vertaling niet beschikbaar is voor de huidige locale, terwijl de waarden prop biedt dynamische waarden voor de tijdelijke aanduidingen in uw vertaalde berichten.

Bijvoorbeeld:

importeren Reageer van"Reageer";
importeren { Geformatteerd bericht } van"reageer-intl";
functieapp() {
opbrengst (




 identiteitsbewijs="groet"
 standaardBericht="Goedemorgen {naam}"
 waarden={{ naam: 'John'}}
 />
 </p>
 </div>
 );
}
exporterenstandaard App;

In dit codeblok wordt de ID kaart prop van de Opgemaakt bericht component maakt gebruik van de groet sleutel van de berichtenInFrans voorwerp, en de waarden prop vervangt de {naam} tijdelijke aanduiding met de waarde "Jan".

Getallen opmaken met de component FormattedNumber

React Intl biedt ook de Opgemaakt nummer component die u kunt gebruiken om getallen op te maken op basis van de huidige locale. De component accepteert verschillende rekwisieten om de opmaak aan te passen, zoals stijl, valuta en minimum- en maximumcijfers voor breuken.

Hier zijn enkele voorbeelden:

importeren Reageer van"Reageer";
importeren { Opgemaakt nummer } van"reageer-intl";
functieapp() {
opbrengst (




 Decimale: <Opgemaakt nummerwaarde={123.456}stijl="decimale" />
 </p>


 procent: <Opgemaakt nummerwaarde={123.456}stijl="procent" />
 </p>
 </div>
 );
}
exporterenstandaard App;

Dit voorbeeld gebruikt de Opgemaakt nummer onderdeel dat a accepteert waarde prop specificeert het nummer dat u wilt opmaken.

De... gebruiken stijl prop, kunt u het uiterlijk van het opgemaakte nummer aanpassen. U kunt de stijl steunen op decimale, procent, of munteenheid.

Wanneer u de stijl prop naar valuta, de Opgemaakt nummer component formatteert het getal als een valutawaarde met behulp van de code die is opgegeven in de munteenheid steun:

importeren Reageer van"Reageer";
importeren { Opgemaakt nummer } van"reageer-intl";
functieapp() {
opbrengst (




 Prijs: <Opgemaakt nummerwaarde={123.456}stijl="munteenheid"munteenheid="AMERIKAANSE DOLLAR" />
 </p>
 </div>
 );
}
exporterenstandaard App;

De Opgemaakt nummer component formatteert het nummer in het bovenstaande codeblok met behulp van de munteenheid stijl en de Amerikaanse Dollar valuta code.

U kunt ook getallen opmaken met een bepaald aantal decimalen met behulp van de minimumFractionDigits En maximumFractionDigits rekwisieten.

De minimumFractionDigits prop specificeert het minimale aantal breukcijfers dat moet worden weergegeven. De maximumFractionDigits prop specificeert het maximum aantal breukcijfers.

Als een getal minder breukcijfers heeft dan opgegeven minimumFractionDigits, zal React Intl het opvullen met nullen. Als het getal meer breukcijfers heeft dan opgegeven maximumFractionDigits, rondt de bibliotheek het getal naar boven af.

Hier is een voorbeeld dat laat zien hoe je deze rekwisieten kunt gebruiken:

importeren Reageer van"Reageer";
importeren { Opgemaakt nummer } van"reageer-intl";
functieapp() {
opbrengst (




 waarde={123.4567}
 minimumFractionDigits={2}
 maximumFractionDigits={3}
 />
 </p>
 </div>
 );
}
exporterenstandaard App;

Datums opmaken met de FormattedDate-component

U kunt datums op een consistente en gemakkelijk leesbare manier opmaken met React Intl. De Geformatteerde datum component biedt een eenvoudige en effectieve manier om datums op te maken. Het werkt op dezelfde manier als datum-tijdbibliotheken die datums opmaken, zoals Moment.js.

De component FormattedDate heeft veel rekwisieten nodig, zoals waarde, dag, maand, En jaar. De waarde-prop accepteert de datum die u wilt opmaken en de andere props configureren de opmaak.

Bijvoorbeeld:

importeren Reageer van"Reageer";
importeren { Geformatteerde datum } van"reageer-intl";
functieapp() {
const vandaag = nieuwDatum();
opbrengst (




 Vandaagde datum is
 waarde={vandaag}
 dag="numeriek"
 maand="lang"
 jaar="numeriek"
 />
 </p>
 </div>
 );
}
exporterenstandaard App;

In dit voorbeeld is de waarde prop gebruikt de huidige datum. Ook het gebruik van de dag, maand, En jaar rekwisieten, geeft u op dat u het jaar, de maand en de dag in een lang formaat wilt weergeven.

Naast de dag, de maand en het jaar geven ook andere rekwisieten het uiterlijk van de datum weer. Dit zijn de rekwisieten en de waarden die ze accepteren:

• jaar: "numeriek", "2-cijferig"
• maand: "numeriek", "2-cijferig", "smal", "kort", "lang"
• dag: "numeriek", "2-cijferig"
• uur: "numeriek", "2-cijferig"
• minuut: "numeriek", "2-cijferig"
• seconde: "numeriek", "2-cijferig"
• timeZoneNaam: "kort lang"

U kunt ook de Geformatteerde datum component om tijd op te maken en weer te geven:

importeren Reageer van"Reageer";
importeren { Geformatteerde datum } van"reageer-intl";
functieapp() {
const vandaag = nieuwDatum();
opbrengst (




 Het is
 waarde={vandaag}
 uur="numeriek"
 minuut="numeriek"
 tweede="numeriek"
 />
 </p>
 </div>
 );
}
exporterenstandaard App;

Internationaliseer uw React-applicaties voor een breder publiek

Je hebt geleerd hoe je de React-Intl-bibliotheek installeert en instelt in je React-applicatie. React-intl maakt het eenvoudig om de getallen, datums en valuta's van uw React-applicatie op te maken. U kunt gegevens opmaken op basis van de landinstelling van de gebruiker met behulp van de componenten FormattedMessage, FormattedNumber en FormattedDate.

React-ontwikkelaars maken vaak fouten die tot ernstige gevolgen kunnen leiden. Bijvoorbeeld het niet correct bijwerken van de status. Het is belangrijk om op de hoogte te zijn van deze veelvoorkomende fouten en deze vroegtijdig te corrigeren om kostbare problemen te voorkomen.