Το React Intl είναι μια δημοφιλής βιβλιοθήκη που παρέχει ένα σύνολο στοιχείων και βοηθητικών προγραμμάτων για τη διεθνοποίηση εφαρμογών React. Η διεθνοποίηση, επίσης γνωστή ως i18n, είναι η διαδικασία προσαρμογής μιας εφαρμογής σε διαφορετικές γλώσσες και πολιτισμούς.
Μπορείτε εύκολα να υποστηρίξετε πολλές γλώσσες και τοπικές ρυθμίσεις στην εφαρμογή React με το ReactIntl.
Πίνακας περιεχομένων
Εγκατάσταση του React Intl
Για να χρησιμοποιήσετε τη βιβλιοθήκη React Intl, πρέπει πρώτα να την εγκαταστήσετε. Μπορείτε να το κάνετε αυτό με περισσότερους από έναν διαχειριστές πακέτων: npm, yarn ή pnpm.
Για να το εγκαταστήσετε με npm, εκτελέστε αυτήν την εντολή στο τερματικό σας:
npm install react-intl
Για να το εγκαταστήσετε χρησιμοποιώντας νήμα, εκτελέστε αυτήν την εντολή:
yarn add react-intl
Πώς να χρησιμοποιήσετε τη βιβλιοθήκη React Intl
Αφού εγκαταστήσετε τη βιβλιοθήκη React Intl, μπορείτε να χρησιμοποιήσετε τα στοιχεία και τις δυνατότητες της στην εφαρμογή σας. Το React Intl έχει παρόμοιες λειτουργίες με το JavaScript Intl API.
Ορισμένα πολύτιμα στοιχεία που προσφέρονται από τη βιβλιοθήκη React Intl περιλαμβάνουν τα στοιχεία FormattedMessage και IntlProvider.
Το στοιχείο FormattedMessage εμφανίζει μεταφρασμένες συμβολοσειρές στην εφαρμογή σας, ενώ το στοιχείο IntlProvider παρέχει τις μεταφράσεις και τις πληροφορίες μορφοποίησης στην εφαρμογή σας.
Πρέπει να δημιουργήσετε ένα αρχείο μετάφρασης για να μπορέσετε να αρχίσετε να χρησιμοποιείτε τα στοιχεία FormattedMessage και IntlProvider για τη μετάφραση της εφαρμογής σας. Ένα αρχείο μετάφρασης περιέχει όλες τις μεταφράσεις για την αίτησή σας. Μπορείτε να δημιουργήσετε ξεχωριστά αρχεία για κάθε γλώσσα και τοπική ρύθμιση ή να χρησιμοποιήσετε ένα μόνο αρχείο για να περιέχει όλες τις μεταφράσεις.
Για παράδειγμα:
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
Αυτό το παράδειγμα αρχείου μετάφρασης περιέχει δύο μεταφραστικά αντικείμενα: messagesIn French και messagesInItalian. Μπορείτε να αντικαταστήσετε το σύμβολο κράτησης θέσης {name} στη συμβολοσειρά χαιρετισμού κατά το χρόνο εκτέλεσης με μια δυναμική τιμή.
Για να χρησιμοποιήσετε τις μεταφράσεις στην εφαρμογή σας, πρέπει να τυλίξετε το ριζικό στοιχείο της εφαρμογής σας με το στοιχείο IntlProvider. Το στοιχείο IntlProvider παίρνει τρία στηρίγματα του React: τοπική ρύθμιση, προεπιλογή τοπικού χαρακτήρα και μηνύματα.
Το prop τοπικό αποδέχεται μια συμβολοσειρά που καθορίζει τις τοπικές ρυθμίσεις του χρήστη, ενώ το defaultLocale καθορίζει μια εναλλακτική εάν η προτιμώμενη τοπική ρύθμιση του χρήστη δεν είναι διαθέσιμη. Τέλος, το στήριγμα μηνυμάτων δέχεται ένα αντικείμενο μετάφρασης.
Ακολουθεί ένα παράδειγμα που δείχνει πώς μπορείτε να χρησιμοποιήσετε το 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>
);
Αυτό το παράδειγμα μεταβιβάζει την τοπική γλώσσα fr, τη μετάφραση messagesInFrench και μια προεπιλεγμένη τοπική ρύθμιση en στο στοιχείο IntlProvider.
Μπορείτε να περάσετε περισσότερα από ένα αντικείμενα τοπικών ρυθμίσεων ή μετάφρασης και ο IntlProvider θα εντοπίσει αυτόματα τη γλώσσα του προγράμματος περιήγησης του χρήστη και θα χρησιμοποιήσει τις κατάλληλες μεταφράσεις.
Για να εμφανίσετε μεταφρασμένες συμβολοσειρές στην εφαρμογή σας, χρησιμοποιήστε το στοιχείο FormattedMessage. Το στοιχείο FormattedMessage λαμβάνει μια βάση αναγνωριστικού που αντιστοιχεί σε ένα αναγνωριστικό μηνύματος στο αντικείμενο μηνυμάτων.
Το στοιχείο λαμβάνει επίσης ένα προεπιλεγμένο μήνυμα και αξίες. Το prop defaultMessage καθορίζει ένα εναλλακτικό μήνυμα εάν μια μετάφραση δεν είναι διαθέσιμη για τις τρέχουσες τοπικές ρυθμίσεις, ενώ το prop values παρέχει δυναμικές τιμές για τα σύμβολα κράτησης θέσης στα μεταφρασμένα μηνύματά σας.
Για παράδειγμα:
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;
Σε αυτό το μπλοκ κώδικα, το id prop του στοιχείου FormattedMessage χρησιμοποιεί το κλειδί χαιρετισμού από το αντικείμενο messagesInFrench και το props value αντικαθιστά το σύμβολο κράτησης θέσης {name} με την τιμή “John”.
Μορφοποίηση αριθμών με το στοιχείο FormattedNumber
Το React Intl παρέχει επίσης το στοιχείο FormattedNumber το οποίο μπορείτε να χρησιμοποιήσετε για να μορφοποιήσετε αριθμούς με βάση την τρέχουσα τοπική ρύθμιση. Το στοιχείο δέχεται διάφορα στηρίγματα για την προσαρμογή της μορφοποίησης, όπως στυλ, νόμισμα και ελάχιστα και μέγιστα ψηφία κλασμάτων.
Να μερικά παραδείγματα:
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;
Αυτό το παράδειγμα χρησιμοποιεί το στοιχείο FormattedNumber το οποίο δέχεται μια τιμή που καθορίζει τον αριθμό που θέλετε να μορφοποιήσετε.
Χρησιμοποιώντας το στυλ στηρίγματος, μπορείτε να προσαρμόσετε την εμφάνιση του μορφοποιημένου αριθμού. Μπορείτε να ορίσετε το στιλ σε δεκαδικό, τοις εκατό ή νόμισμα.
Όταν ορίζετε το στυλ στηρίγματος σε νόμισμα, το στοιχείο FormattedNumber μορφοποιεί τον αριθμό ως τιμή νομίσματος χρησιμοποιώντας τον κωδικό που καθορίζεται στο στηρίγμα νομίσματος:
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;
Το στοιχείο FormattedNumber μορφοποιεί τον αριθμό στο μπλοκ κωδικών παραπάνω χρησιμοποιώντας το στυλ νομίσματος και τον κωδικό νομίσματος USD.
Μπορείτε επίσης να μορφοποιήσετε αριθμούς με συγκεκριμένο αριθμό δεκαδικών ψηφίων χρησιμοποιώντας τα στηρίγματα minimalFractionDigits και maximumFractionDigits.
Το prop minimalFractionDigits καθορίζει τον ελάχιστο αριθμό ψηφίων κλασμάτων προς εμφάνιση. Αντίθετα, το prop maximumFractionDigits καθορίζει τον μέγιστο αριθμό ψηφίων κλασμάτων.
Εάν ένας αριθμός έχει λιγότερα ψηφία κλασμάτων από τα καθορισμένα minimumFractionDigits, το React Intl θα τον συμπληρώσει με μηδενικά. Εάν ο αριθμός έχει περισσότερα ψηφία κλασμάτων από τα καθορισμένα μέγιστα FractionDigits, η βιβλιοθήκη θα στρογγυλοποιήσει τον αριθμό προς τα πάνω.
Ακολουθεί ένα παράδειγμα που δείχνει πώς μπορείτε να χρησιμοποιήσετε αυτά τα στηρίγματα:
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;
Μορφοποίηση ημερομηνιών με το στοιχείο FormattedDate
Μπορείτε να μορφοποιήσετε τις ημερομηνίες με τρόπο συνεπή και ευανάγνωστο χρησιμοποιώντας το React Intl. Το στοιχείο FormattedDate παρέχει έναν απλό και αποτελεσματικό τρόπο μορφοποίησης ημερομηνιών. Λειτουργεί παρόμοια με τις βιβλιοθήκες ημερομηνίας-ώρας που μορφοποιούν ημερομηνίες, όπως το Moment.js.
Το στοιχείο FormattedDate απαιτεί πολλά στηρίγματα, όπως τιμή, ημέρα, μήνα και έτος. Η τιμή prop δέχεται την ημερομηνία που θέλετε να μορφοποιήσετε και τα άλλα στηρίγματα διαμορφώνουν τη μορφοποίησή της.
Για παράδειγμα:
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;
Σε αυτό το παράδειγμα, η τιμή prop χρησιμοποιεί την τρέχουσα ημερομηνία. Επίσης, χρησιμοποιώντας τα στηρίγματα ημέρας, μήνα και έτους, προσδιορίζετε ότι θέλετε το έτος, ο μήνας και η ημέρα να εμφανίζονται σε μεγάλη μορφή.
Εκτός από την ημέρα, τον μήνα και το έτος, άλλα στηρίγματα διαμορφώνουν επίσης την εμφάνιση της ημερομηνίας. Εδώ είναι τα στηρίγματα και οι αξίες που δέχονται:
- έτος: “αριθμητικό”, “2-ψήφιο”
- μήνας: “αριθμητικό”, “2-ψήφιο”, “στενό”, “κοντό”, “μακρύ”
- ημέρα: “αριθμητικό”, “2-ψήφιο”
- ώρα: “αριθμητικό”, “2-ψήφιο”
- λεπτό: “αριθμητικό”, “2-ψήφιο”
- δεύτερο: “αριθμητικό”, “2-ψήφιο”
- timeZoneName: “short”, “long”
Μπορείτε επίσης να χρησιμοποιήσετε το στοιχείο FormattedDate για να μορφοποιήσετε και να εμφανίσετε την ώρα:
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;
Διεθνοποιήστε τις εφαρμογές σας React για ένα ευρύτερο κοινό
Μάθατε πώς να εγκαταστήσετε και να ρυθμίσετε τη βιβλιοθήκη React-Intl στην εφαρμογή React σας. Το React-intl διευκολύνει τη μορφοποίηση των αριθμών, των ημερομηνιών και των νομισμάτων της εφαρμογής React. Μπορείτε να μορφοποιήσετε δεδομένα με βάση τις τοπικές ρυθμίσεις του χρήστη χρησιμοποιώντας τα στοιχεία FormattedMessage, FormattedNumber και FormattedDate.
Οι προγραμματιστές του React συχνά κάνουν λάθη που μπορεί να οδηγήσουν σε σοβαρές συνέπειες. Για παράδειγμα, η αποτυχία ενημέρωσης της κατάστασης σωστά. Είναι σημαντικό να γνωρίζετε αυτά τα κοινά λάθη και να τα διορθώνετε έγκαιρα για να αποφύγετε δαπανηρά προβλήματα.