پشتیبانی چند زبانه را در React پیاده سازی کنید

برای خواندن مقالات بیشتر از این قبیل به وبلاگ من مراجعه کنید

پشتیبانی از چند زبان یکی از ویژگی های مهم یک اپلیکیشن فرانت اند خوب است. امروز خواهیم دید که چگونه می توانیم پشتیبانی چند زبانه را در یک برنامه React موجود اضافه کنیم.

برای امروز فرض می کنیم که برای 2 زبان به پشتیبانی نیاز داریم. فرآیند در اینجا می تواند به هر تعداد زبانی که می خواهید پشتیبانی کنید گسترش یابد.

ما از یک کتابخانه محبوب به نام استفاده خواهیم کرد react-i18next بر اساس i18next.

مرحله 1. Dependencies را نصب کنید

باید 4 وابستگی نصب کنیم.

دو کتابخانه اول کارهای سنگین را برای ما انجام خواهند داد.

yarn add react-i18next i18next

بسته زیر به طور خودکار زبان را برای ما شناسایی می کند. بنابراین نگران تعیین زبان انتخابی فعلی نباشید

yarn add i18next-browser-languagedetector

بسته بعدی مقادیر را بسته به زبانی که توسط آشکارساز زبان برگردانده می شود بارگذاری می کند.

yarn add i18next-xhr-backend

مرحله 2. فایل پیکربندی را اضافه کنید

یک فایل جدید در کنار فایل index.js با نام i18n.js ایجاد کنید در اینجا می‌توانیم زبان‌هایی را که می‌خواهیم پشتیبانی کنیم، مشخص کنیم.

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import Backend from 'i18next-xhr-backend'
import LanguageDetector from 'i18next-browser-languagedetector'

const fallbackLng = ['en']
const availableLanguages = ['en', 'bn']

i18n.use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        fallbackLng,
        detection: {
            checkWhitelist: true
        },
        debug: false,
        whitelist: availableLanguages,
        interpolation: {
            escapeValue: false // no need for react. it escapes by default
        }
    })

export default i18n

مرحله 3: App.js را به Load Language تغییر دهید

در این مرحله باید خودمان را اصلاح کنیم App.js فایل و فایل پیکربندی ما را شامل شود. توجه کنید استفاده کردیم <Suspense> اینجا به عنوان react-i18next منابع محلی را به صورت ناهمزمان بارگیری می کند و باید منتظر بمانیم تا بارگذاری تمام شود

import React, { FC,Suspense } from 'react';
import './App.css';
import './i18n'

const App: FC = ()=> {
  return (
    <div className="App">
        <Suspense fallback={null}>
            //OTHER COMPONENTS
        </Suspense>

    </div>
  );
}

export default App;

مرحله 4: برای هر زبان فایل های جداگانه ایجاد کنید

یک پوشه جدید برای هر یک از زبان های مورد نظر در داخل public/locales/language_name/ ایجاد کنید.

مراقب باش. اسامی باید دقیقاً مشابه تصویر زیر باشد. در غیر این صورت، مقادیر نمی توانند به طور خودکار بارگیری شوند. بدیهی است که می‌توانیم رفتار را تغییر دهیم، اما برای سادگی، فعلا وارد آن نمی‌شویم.

مرحله 5. مقادیر را در داخل فایل مخصوص زبان اضافه کنید

محتویات زیر فایل en/translation.js می تواند چیزی شبیه به…

{
    "top_bar_title": "Community Admin Panel"
}

محتویات زیر فایل bn/translation.js می تواند چیزی شبیه به…

{
    "top_bar_title": "Community Admin Panel"
}

به این ترتیب باید برای هر یک از زبان‌ها ارزش اضافه کنید.

مرحله 6. استفاده از مقادیر داخل کامپوننت

می توانید از مقدار تعریف شده در داخل فایل های JSON به روش زیر استفاده کنید

امتیاز: تغییر زبان

اکنون می توانید به سادگی از دستور زیر در هر جایی برای جابجایی به زبان مورد نظر خود استفاده کنید (به عنوان مثال در داخل یک دکمه یا جابجایی زبان)

اکنون برنامه عالی شما از هر تعداد زبانی که می خواهید پشتیبانی می کند.

برای امروز همین است. کد نویسی مبارک! :دی

از طریق لینکدین با من در تماس باشید