Sovelluksesi tulisi kommunikoida useilla kielillä mahdollisimman laajan yleisön saamiseksi. Ota selvää, kuinka voit tehdä tästä tehtävästä vähemmän pelottavan.
React Intl on suosittu kirjasto, joka tarjoaa joukon komponentteja ja apuohjelmia React-sovellusten kansainvälistämiseen. Kansainvälistyminen, joka tunnetaan myös nimellä i18n, on prosessi, jossa sovellusta mukautetaan eri kielille ja kulttuureille.
Voit helposti tukea useita kieliä ja alueita React-sovelluksessasi ReactIntl: n avulla.
React Intl
Jotta voit käyttää React Intl -kirjastoa, sinun on ensin asennettava se. Voit tehdä tämän kanssa useampi kuin yksi paketinhallinta: npm, lanka tai pnpm.
Asenna se npm: llä suorittamalla tämä komento päätteessäsi:
npm install react-intl
Asenna se langalla suorittamalla tämä komento:
lanka add react-intl
Kuinka käyttää React Intl -kirjastoa
Kun olet asentanut React Intl -kirjaston, voit käyttää sen komponentteja ja ominaisuuksia sovelluksessasi. React Intl: llä on samanlaiset toiminnot kuin JavaScript Intl API.
Joitakin React Intl -kirjaston tarjoamia arvokkaita komponentteja ovat mm Muotoiltu viesti ja IntlProvider komponentit.
FormattedMessage-komponentti näyttää käännetyt merkkijonot sovelluksessasi, kun taas IntlProvider-komponentti tarjoaa käännökset ja muotoilutiedot sovelluksellesi.
Sinun on luotava käännöstiedosto, ennen kuin voit alkaa käyttää FormattedMessage- ja IntlProvider-komponentteja sovelluksesi kääntämiseen. Käännöstiedosto sisältää kaikki hakemuksesi käännökset. Voit luoda erilliset tiedostot kullekin kielelle ja maa-alueelle tai käyttää yhtä tiedostoa sisältämään kaikki käännökset.
Esimerkiksi:
viedäkonst viestit ranskaksi = {
tervehdys: "Bonjour {name}"
}
viedäkonst viestititaliaksi = {
tervehdys: "Buongiorno {name}"
}
Tämä esimerkkikäännöstiedosto sisältää kaksi käännösobjektia: viestit ranskaksi ja viestit italiaksi. Voit korvata paikkamerkin {nimi} in tervehdys merkkijono ajon aikana dynaamisella arvolla.
Jos haluat käyttää käännöksiä sovelluksessasi, sinun on käärittävä sovelluksesi juurikomponentti IntlProvider komponentti. IntlProvider-komponentti kestää kolme Reagoi rekvisiitta: alue, defaultLocale, ja viestejä.
Kieliasetus hyväksyy merkkijonon, joka määrittää käyttäjän kieli-asetuksen, kun taas defaultLocale määrittää varavaihtoehdon, jos käyttäjän ensisijainen alue ei ole käytettävissä. Lopuksi viestipalkki hyväksyy käännösobjektin.
Tässä on esimerkki, joka näyttää, kuinka voit käyttää IntlProvideria:
tuonti Reagoi alkaen"reagoi";
tuonti ReactDOM alkaen"react-dom/client";
tuonti Sovellus alkaen"./Sovellus";
tuonti { IntlProvider } alkaen"react-intl";
tuonti { viestit ranskaksi } alkaen"./käännös";
ReactDOM.createRoot(asiakirja.getElementById("juuri")).render("fr" messages={messagesInFrench} defaultLocale="en">
</IntlProvider>
</React.StrictMode>
);
Tämä esimerkki ohittaa fr alue, viestit ranskaksi käännös ja oletusarvo fi alueeksi IntlProvider komponentti.
Voit välittää useamman kuin yhden kieli- tai käännösobjektin ja IntlProvider tunnistaa automaattisesti käyttäjän selaimen kielen ja käyttää asianmukaisia käännöksiä.
Voit näyttää käännetyt merkkijonot sovelluksessasi käyttämällä Muotoiltu viesti komponentti. The Muotoiltu viesti komponentti vie an id prop, joka vastaa viesti-objektin viestitunnusta.
Komponentti kestää myös a oletusviesti ja arvot prop. The oletusviesti prop määrittää varaviestin, jos käännös ei ole saatavilla nykyiselle maa-asetukselle, kun taas arvot prop tarjoaa dynaamisia arvoja käännetyissä viesteissä oleville paikkamerkeille.
Esimerkiksi:
tuonti Reagoi alkaen"reagoi";
tuonti { Muotoiltu viesti } alkaen"react-intl";toimintoSovellus() {
palata (
id="tervehdys"
oletusviesti="Hyvää huomenta {name}"
arvot={{ nimi: "John"}}
/>
</p>
</div>
);
}
viedäoletuksena Sovellus;
Tässä koodilohkossa id prop of the Muotoiltu viesti komponentti käyttää tervehdys avain osoitteesta viestit ranskaksi esine, ja arvot prop korvaa {nimi} paikkamerkki, jonka arvo on "John".
Numeroiden muotoilu FormattedNumber-komponentilla
React Intl tarjoaa myös MuotoiltuNumber komponentti, jolla voit muotoilla numeroita nykyisen kielen perusteella. Komponentti hyväksyy erilaisia rekvisiitta muotoilun mukauttamiseen, kuten tyylin, valuutan sekä vähimmäis- ja enimmäismurtolukuja.
Tässä muutamia esimerkkejä:
tuonti Reagoi alkaen"reagoi";
tuonti { FormattedNumber } alkaen"react-intl";toimintoSovellus() {
palata (
Desimaali: <MuotoiltuNumberarvo={123.456}tyyli="desimaali" />
</p>
Prosentti: <MuotoiltuNumberarvo={123.456}tyyli="prosentti" />
</p>
</div>
);
}
viedäoletuksena Sovellus;
Tässä esimerkissä käytetään MuotoiltuNumber komponentti, joka hyväksyy a arvo prop, joka määrittää numeron, jonka haluat muotoilla.
Käyttämällä tyyli prop, voit mukauttaa muotoillun numeron ulkoasua. Voit asettaa tyyli tukea desimaali, prosenttia, tai valuutta.
Kun asetat tyyli tuki valuutalle, MuotoiltuNumber komponentti muotoilee luvun valuutta-arvoksi käyttämällä koodissa määritettyä koodia valuutta prop:
tuonti Reagoi alkaen"reagoi";
tuonti { FormattedNumber } alkaen"react-intl";toimintoSovellus() {
palata (
Hinta: <MuotoiltuNumberarvo={123.456}tyyli="valuutta"valuutta="USD" />
</p>
</div>
);
}
viedäoletuksena Sovellus;
The MuotoiltuNumber komponentti muotoilee numeron yllä olevassa koodilohkossa käyttämällä valuutta tyyli ja USD valuutta koodi.
Voit myös muotoilla numeroita tietyllä määrällä desimaalimerkkejä käyttämällä minimiFractionDigits ja maksimiFractionDigits rekvisiitta.
The minimiFractionDigits prop määrittää näytettävien murtolukujen vähimmäismäärän. Sitä vastoin maksimiFractionDigits prop määrittää murtolukujen enimmäismäärän.
Jos numerossa on vähemmän murtolukuja kuin määritetty minimiFractionDigits, React Intl täyttää sen nollilla. Jos numerossa on enemmän murtolukuja kuin määritetty maksimiFractionDigits, kirjasto pyöristää luvun ylöspäin.
Tässä on esimerkki siitä, kuinka voit käyttää näitä rekvisiitta:
tuonti Reagoi alkaen"reagoi";
tuonti { FormattedNumber } alkaen"react-intl";toimintoSovellus() {
palata (
arvo={123.4567}
minimiFractionDigits={2}
maximumFractionDigits={3}
/>
</p>
</div>
);
}
viedäoletuksena Sovellus;
Päivämäärien muotoilu FormattedDate-komponentilla
Voit muotoilla päivämäärät johdonmukaisella ja helposti luettavalla tavalla käyttämällä React Intl. The FormattedDate komponentti tarjoaa yksinkertaisen ja tehokkaan tavan muotoilla päivämäärät. Se toimii samalla tavalla kuin päivämäärä-aikakirjastot, jotka muotoilevat päivämäärät, kuten Moment.js.
FormattedDate-komponentti vaatii monia rekvisiitta, kuten arvo, päivä, kuukausi, ja vuosi. Arvo-ehdotus hyväksyy muotoiltavan päivämäärän, ja muut ehdot määrittävät sen muotoilun.
Esimerkiksi:
tuonti Reagoi alkaen"reagoi";
tuonti { FormattedDate } alkaen"react-intl";toimintoSovellus() {
konst tänään = UusiPäivämäärä();palata (
Tänäänpäivämäärä on
arvo={tänään}
päivä ="numeerinen"
kuukausi ="pitkä"
vuosi ="numeerinen"
/>
</p>
</div>
);
}
viedäoletuksena Sovellus;
Tässä esimerkissä arvo prop käyttää nykyistä päivämäärää. Myös käyttämällä päivä, kuukausi, ja vuosi rekvisiitta, määrität, että haluat vuoden, kuukauden ja päivän näkyvän pitkässä muodossa.
Päivän, kuukauden ja vuoden ohella muutkin rekvisiitta muotoilevat päivämäärän ulkoasun. Tässä on rekvisiitta ja niiden hyväksymät arvot:
- vuosi: "numeerinen", "2-numeroinen"
- kuukausi: "numeerinen", "2-numeroinen", "kapea", "lyhyt", "pitkä"
- päivä: "numeerinen", "2-numeroinen"
- tunnin: "numeerinen", "2-numeroinen"
- minuutti: "numeerinen", "2-numeroinen"
- toinen: "numeerinen", "2-numeroinen"
- aikavyöhykkeenNimi: "lyhyt pitkä"
Voit myös käyttää FormattedDate muotoinen komponentti ja näyttöaika:
tuonti Reagoi alkaen"reagoi";
tuonti { FormattedDate } alkaen"react-intl";toimintoSovellus() {
konst tänään = UusiPäivämäärä();palata (
Kello on
arvo={tänään}
tunti ="numeerinen"
minuutti ="numeerinen"
toinen ="numeerinen"
/>
</p>
</div>
);
}
viedäoletuksena Sovellus;
Kansainvälistä React-hakemuksesi laajemmalle yleisölle
Opit asentamaan ja määrittämään React-Intl-kirjaston React-sovelluksessasi. React-intl: n avulla on helppo muotoilla React-sovelluksesi numerot, päivämäärät ja valuutat. Voit muotoilla tietoja käyttäjän kielen perusteella käyttämällä FormattedMessage-, FormattedNumber- ja FormattedDate-komponentteja.
React-kehittäjät tekevät usein virheitä, jotka voivat johtaa vakaviin seurauksiin. Esimerkiksi tilan päivittäminen epäonnistui. On tärkeää olla tietoinen näistä yleisistä virheistä ja korjata ne ajoissa kalliiden ongelmien välttämiseksi.