React Intl là một thư viện phổ biến cung cấp một bộ thành phần và công cụ để quốc tế hóa các ứng dụng React. Quốc tế hóa, còn được gọi là i18n, là quá trình điều chỉnh ứng dụng cho phù hợp với các ngôn ngữ và nền văn hóa khác nhau.
Bạn có thể dễ dàng hỗ trợ nhiều ngôn ngữ và ngôn ngữ trong ứng dụng React của mình với ReactIntl.
Cài đặt React Intl
Để sử dụng React Intl, trước tiên bạn phải cài đặt nó. Bạn có thể thực hiện việc này với nhiều trình quản lý gói: npm, sợi hoặc pnpm.
Để cài đặt nó bằng npm, hãy chạy lệnh này trong terminal của bạn:
npm install react-intl
Để cài đặt nó bằng sợi, hãy chạy lệnh này:
yarn add react-intl
Cách sử dụng React Intl
Sau khi React Intl được cài đặt, bạn có thể sử dụng các thành phần và chức năng của nó trong ứng dụng của mình. React Intl có các tính năng tương tự như API JavaScript Intl.
Một số thành phần có giá trị được React Intl cung cấp bao gồm các thành phần FormattedMessage và IntlProvider.
Thành phần FormattedMessage hiển thị các chuỗi đã dịch trong ứng dụng của bạn, trong khi thành phần IntlProvider cung cấp thông tin dịch và định dạng cho ứng dụng của bạn.
Trước khi bắt đầu sử dụng các thành phần FormattedMessage và IntlProvider để dịch ứng dụng của mình, bạn phải tạo một tệp dịch. Tệp dịch chứa tất cả các bản dịch cho ứng dụng của bạn. Bạn có thể tạo các tệp riêng biệt cho từng ngôn ngữ và vị trí hoặc sử dụng một tệp để lưu trữ tất cả bản dịch của mình.
Ví dụ:
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
Tệp dịch mẫu này chứa hai đối tượng dịch: messageIn French và messageInItalian. Bạn có thể thay thế phần giữ chỗ {name} trong chuỗi lời chào khi chạy bằng một giá trị động.
Để sử dụng bản dịch trong ứng dụng của mình, bạn phải bọc thành phần ứng dụng chính bằng thành phần IntlProvider. Thành phần IntlProvider có ba thuộc tính React: ngôn ngữ, ngôn ngữ mặc định và tin nhắn.
Thuộc tính locale chấp nhận một chuỗi chỉ định ngôn ngữ của người dùng, trong khi defaultLocale chỉ định dự phòng nếu ngôn ngữ ưa thích của người dùng không có sẵn. Cuối cùng, thuộc tính thông báo chấp nhận một đối tượng dịch thuật.
Đây là một ví dụ cho thấy cách bạn có thể sử dụng 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>
);
Ví dụ này chuyển fr locale, bản dịch thông báo tiếng Pháp và en locale mặc định cho thành phần IntlProvider.
Bạn có thể chuyển nhiều đối tượng ngôn ngữ hoặc bản dịch và IntlProvider sẽ tự động phát hiện ngôn ngữ trình duyệt của người dùng và sử dụng các bản dịch thích hợp.
Để hiển thị các chuỗi đã dịch trong ứng dụng của bạn, hãy sử dụng thành phần FormattedMessage. Thành phần FormattedMessage nhận thuộc tính id tương ứng với ID tin nhắn trong đối tượng tin nhắn.
Thành phần này cũng chấp nhận thuộc tính defaultMessage và value. Thuộc tính defaultMessage chỉ định thông báo giữ chỗ nếu bản dịch không có sẵn cho vị trí hiện tại, trong khi thuộc tính value cung cấp các giá trị giữ chỗ động trong các thông báo đã dịch.
Ví dụ:
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;
Trong khối mã này, thuộc tính id của thành phần FormattedMessage sử dụng khóa chào mừng từ đối tượng messageInFrance và thuộc tính value thay thế phần giữ chỗ {name} bằng “John”.
Định dạng số bằng thành phần FormattedNumber
React Intl cũng cung cấp thành phần FormattedNumber mà bạn có thể sử dụng để định dạng số dựa trên ngôn ngữ hiện tại. Thành phần này chấp nhận nhiều đạo cụ khác nhau để tùy chỉnh định dạng, chẳng hạn như kiểu, đơn vị tiền tệ cũng như các chữ số phân số tối thiểu và tối đa.
Dưới đây là một số ví dụ:
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;
Ví dụ này sử dụng thành phần FormattedNumber, chấp nhận thuộc tính chỉ định số bạn muốn định dạng.
Bằng cách sử dụng style prop, bạn có thể tùy chỉnh hình thức của số được định dạng. Bạn có thể đặt giá trị kiểu thành số thập phân, phần trăm hoặc tiền tệ.
Khi thuộc tính kiểu được đặt thành tiền tệ, thành phần FormattedNumber định dạng số dưới dạng giá trị tiền tệ bằng cách sử dụng mã được chỉ định trong thuộc tính tiền tệ:
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;
Thành phần FormattedNumber định dạng số trong khối mã ở trên bằng cách sử dụng kiểu tiền tệ và mã tiền tệ USD.
Các số cũng có thể được định dạng bằng một số vị trí thập phân cụ thể bằng cách sử dụng các thuộc tính MinimalFractionDigits và MaximumFractionDigits.
Thuộc tính MinimalFractionDigits chỉ định số chữ số phân số tối thiểu cần hiển thị. Thuộc tính maxFractionDigits chỉ định số chữ số phân số tối đa.
Nếu số có ít chữ số phân số hơn số nhỏ nhấtFractionDigits được chỉ định, React Intl sẽ đệm nó bằng số 0. Nếu số có nhiều chữ số phân số hơn FractionDigits tối đa được chỉ định thì thư viện sẽ làm tròn số lên.
Đây là một ví dụ cho thấy cách bạn có thể sử dụng những đạo cụ này:
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;
Định dạng ngày tháng bằng thành phần FormattedDate
Bạn có thể định dạng ngày tháng một cách nhất quán và dễ đọc bằng React Intl. Thành phần FormattedDate cung cấp một cách đơn giản và hiệu quả để định dạng ngày tháng. Nó hoạt động tương tự như các thư viện định dạng ngày giờ như Moment.js.
Thành phần FormattedDate có nhiều giá trị như giá trị, ngày, tháng và năm. Giá trị phù hợp chấp nhận ngày bạn muốn định dạng và các đạo cụ khác định cấu hình định dạng của nó.
Ví dụ:
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;
Trong ví dụ này, giá trị prop sử dụng ngày hiện tại. Sử dụng các props ngày, tháng và năm, bạn chỉ định rằng năm, tháng và ngày phải được hiển thị ở định dạng dài.
Ngoài ngày, tháng, năm, các đạo cụ khác cũng định dạng hình thức của ngày. Dưới đây là các đạo cụ và giá trị mà chúng chấp nhận:
- năm: “số”, “2-điện tử”
- tháng: “số”, “2-chữ số”, “hẹp”, “ngắn”, “dài”
- ngày: “số”, “2-điện tử”
- giờ: “số”, “2-điện tử”
- phút: “số”, “2-điện tử”
- thứ hai: “số”, “2-điện tử”
- timeZoneName: “ngắn”, “dài”
Bạn cũng có thể sử dụng thành phần FormattedDate để định dạng và hiển thị thời gian:
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;
Quốc tế hóa ứng dụng React của bạn tới nhiều đối tượng hơn
Bạn đã học cách cài đặt và định cấu hình thư viện React-Intl trong ứng dụng React của mình. React-intl giúp dễ dàng định dạng số, ngày tháng và tiền tệ trong ứng dụng React. Dữ liệu có thể được định dạng dựa trên ngôn ngữ của người dùng bằng cách sử dụng các thành phần FormattedMessage, FormattedNumber và FormattedDate.
Các nhà phát triển React thường mắc sai lầm có thể dẫn đến hậu quả nghiêm trọng. Ví dụ: không cập nhật trạng thái thích hợp. Điều quan trọng là phải nhận thức được những lỗi phổ biến này và sửa chúng sớm để tránh những vấn đề tốn kém.
