React Intl este o bibliotecă populară care oferă un set de componente și utilități pentru internaționalizarea aplicațiilor React. Internaționalizarea, cunoscută și sub numele de i18n, este procesul de adaptare a unei aplicații la diferite limbi și culturi.
Puteți accepta cu ușurință mai multe limbi și localități în aplicația dvs. React cu ReactIntl.
Cuprins
Instalarea React Intl
Pentru a utiliza biblioteca React Intl, trebuie mai întâi să o instalați. Puteți face acest lucru cu mai mult de un manager de pachete: npm, yarn sau pnpm.
Pentru a-l instala cu npm, rulați această comandă în terminalul dvs.:
npm install react-intl
Pentru a-l instala folosind yarn, rulați această comandă:
yarn add react-intl
Cum să utilizați biblioteca React Intl
După ce ați instalat biblioteca React Intl, puteți utiliza componentele și caracteristicile acesteia în aplicația dvs. React Intl are funcții similare cu API-ul JavaScript Intl.
Unele componente valoroase oferite de biblioteca React Intl includ componentele FormattedMessage și IntlProvider.
Componenta FormattedMessage afișează șiruri traduse în aplicația dvs., în timp ce componenta IntlProvider oferă informații despre traduceri și formatare aplicației dvs.
Trebuie să creați un fișier de traducere înainte de a putea începe să utilizați componentele FormattedMessage și IntlProvider pentru a traduce aplicația dvs. Un fișier de traducere conține toate traducerile pentru aplicația dvs. Puteți crea fișiere separate pentru fiecare limbă și localitate sau puteți utiliza un singur fișier pentru a conține toate traducerile.
De exemplu:
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
Acest exemplu de fișier de traducere conține două obiecte de traducere: messagesInFrench și messagesInItalian. Puteți înlocui substituentul {nume} din șirul de salut în timpul execuției cu o valoare dinamică.
Pentru a utiliza traducerile în aplicația dvs., trebuie să includeți componenta rădăcină a aplicației cu componenta IntlProvider. Componenta IntlProvider are trei elemente React: locale, defaultLocale și mesaje.
Localizarea acceptă un șir care specifică localitatea utilizatorului, în timp ce defaultLocale specifică o rezervă dacă localitatea preferată a utilizatorului nu este disponibilă. În cele din urmă, mesajele prop acceptă un obiect de traducere.
Iată un exemplu care arată cum puteți utiliza 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>
);
Acest exemplu transmite localitatea fr, traducerea messagesInFrench și o localitate implicită en la componenta IntlProvider.
Puteți trece mai mult de un obiect local sau de traducere, iar IntlProvider va detecta automat limba browserului utilizatorului și va folosi traducerile corespunzătoare.
Pentru a afișa șiruri traduse în aplicația dvs., utilizați componenta FormattedMessage. Componenta FormattedMessage ia o prop ID care corespunde unui ID de mesaj din obiectul mesaje.
Componenta primește, de asemenea, un mesaj implicit și valori prop. Propul defaultMessage specifică un mesaj alternativ dacă o traducere nu este disponibilă pentru localitatea curentă, în timp ce propul pentru valori oferă valori dinamice pentru substituenții din mesajele dvs. traduse.
De exemplu:
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;
În acest bloc de cod, prop id-ul componentei FormattedMessage folosește cheia de salut din obiectul messagesInFrench, iar prop values înlocuiește substituentul {name} cu valoarea „John”.
Formatarea numerelor cu componenta FormattedNumber
React Intl oferă, de asemenea, componenta FormattedNumber pe care o puteți utiliza pentru a formata numere în funcție de localitatea curentă. Componenta acceptă diverse elemente de recuzită pentru a personaliza formatarea, cum ar fi stilul, moneda și cifrele minime și maxime ale fracțiunilor.
Aici sunt cateva exemple:
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;
Acest exemplu folosește componenta FormattedNumber care acceptă o valoare prop care specifică numărul pe care doriți să îl formatați.
Folosind suportul de stil, puteți personaliza aspectul numărului formatat. Puteți seta prop de stil la zecimală, procente sau monedă.
Când setați stilul prop la valută, componenta FormattedNumber formatează numărul ca valoare monetară folosind codul specificat în currency prop:
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;
Componenta FormattedNumber formatează numărul din blocul de cod de mai sus utilizând stilul monedei și codul valutar USD.
De asemenea, puteți formata numere cu un anumit număr de zecimale folosind elementele de recuzită minimumFractionDigits și maximumFractionDigits.
Elementul minimFractionDigits specifică numărul minim de cifre ale fracțiunilor de afișat. În schimb, maximumFractionDigits prop specifică numărul maxim de cifre ale fracțiunilor.
Dacă un număr are mai puține cifre de fracție decât minimumFractionDigits specificat, React Intl îl va completa cu zerouri. Dacă numărul are mai multe cifre de fracție decât maximumFractionDigits specificat, biblioteca va rotunji numărul în sus.
Iată un exemplu care arată cum puteți utiliza aceste elemente de recuzită:
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;
Formatarea datelor cu componenta FormattedDate
Puteți formata datele într-un mod consistent și ușor de citit folosind React Intl. Componenta FormattedDate oferă o modalitate simplă și eficientă de a formata datele. Funcționează în mod similar bibliotecilor date-ora care formatează datele, cum ar fi Moment.js.
Componenta FormattedDate are multe elemente de recuzită, cum ar fi valoarea, ziua, luna și anul. Valoarea prop acceptă data pe care doriți să o formatați, iar celelalte elemente de recuzită configurează formatarea acesteia.
De exemplu:
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;
În acest exemplu, valoarea prop folosește data curentă. De asemenea, folosind elementele de recuzită pentru zi, lună și an, specificați că doriți ca anul, luna și ziua să fie afișate într-un format lung.
Pe lângă zi, lună și an, alte elemente de recuzită formatează și aspectul datei. Iată recuzita și valorile pe care le acceptă:
- an: „numeric”, „2 cifre”
- luna: „numeric”, „2 cifre”, „îngust”, „scurt”, „lung”
- zi: „numeric”, „2 cifre”
- oră: „numeric”, „2 cifre”
- minut: „numeric”, „2 cifre”
- al doilea: „numeric”, „2 cifre”
- timeZoneName: „scurt”, „lung”
De asemenea, puteți utiliza componenta FormattedDate pentru a formata și afișa ora:
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;
Internaționalizați-vă aplicațiile React pentru un public mai larg
Ați învățat cum să instalați și să configurați biblioteca React-Intl în aplicația dvs. React. React-intl facilitează formatarea numerelor, datelor și valutelor aplicației dvs. React. Puteți formata datele în funcție de localitatea utilizatorului folosind componentele FormattedMessage, FormattedNumber și FormattedDate.
Dezvoltatorii React fac adesea greșeli care pot duce la consecințe grave. De exemplu, eșecul actualizării corecte a stării. Este important să fii conștient de aceste greșeli comune și să le corectezi din timp pentru a evita probleme costisitoare.