برای پیاده‌سازی چندزبانی در یک اپ React می‌توان از کتابخانه‌های مختلفی استفاده کرد. معروف‌ترین کتابخانه در این زمینه react-intl است که هم بسیار کاربردی است و هم مستندسازی خوبی دارد. این کتابخانه، تگ‌های کمکی متعددی از قبیل FormattedMessage ارائه کرده که کمک زیادی به برنامه‌نویس در این زمینه می‌کند. اما مساله این است که شما نمی‌توانید از این تگ‌ها در مشخصه‌های (attribute) یک تگ دیگر استفاده کنید.
به عنوان مثال ممکن است لازم باشد که کدی مانند خط زیر بنویسید:
<input type="text"
placeholder="<FormattedMessage id="general.username" />" />
واضح است که این کد کار نمی‌کند.
جستجوهای زیادی انجام دادم و تقریبا ناامید شده بودم که به طور اتفاقی بسته i18next را پیدا کردم. این بسته هم من را و هم چندزبانه کردن پروژه را نجات داد. می‌توانید یک تابع کوتاه بنویسید و بعد از متد i18n.t برای ترجمه رشته‌ها استفاده کنید. این متد به جای یک تگ HTML، یک رشته برمی‌گرداند؛ مساله حل شد. شما می‌توانید این تابع را هر جایی که می‌شود کد جاوااسکریپت نوشت، صدا بزنید.
در ادامه توضیح خلاصه‌ای از نحوه استفاده از i18next خواهید دید.
دستور العمل
۱. بسته را نصب کنید:
npm install --save i18next
۲. آن را در کد ایمپورت کنید:
import i18next from 'i18next'
۳. لیست متن‌های ترجمه را می‌توانید در فایل‌های مجزا قرار دهید و آن‌ها را هم ایمپورت کنید یا مستقیما آن‌ها را در راه‌اندازی اولیه بنویسید:
// i18n.js
i18next.init({
lng: 'fa',
resources: {
'fa': {
translation: {
'login': 'ورود',
'username': 'نام کاربری'
}
},
'en': {
translation: {
'login': 'Login',
'username': 'Username'
}
},
۴. حالا می‌توانید در هر کامپوننتی آن را فراخوانی و استفاده کنید. مثال:
import { i18n } from 'i18n'
...
<h3>{i18n.t('login')}</h3>
<input type="text" placeholder={i18n.t('username')} />
...
همین. آسان نبود؟
مطالب مرتبط
برای مطالعه بیشتر در این مورد می‌توانید به لینک‌های زیر مراجعه کنید:
دیدگاهتان را بنویسید