اذهب إلى المحتوى
  • 1

تغيير اللغة في react-i18next

Rayden Storm

السؤال

مرحبا أنا أكتشف مكتبة react-i18next وقد قمت باتباع خطوات التثبيت حسب توثيق الموقع الرسمي ووصلت الى هذه الخطوة وكل شئ يعمل بسلاسة 

import React from 'react';

// the hook
import { useTranslation } from 'react-i18next';

function MyComponent () {
  const { t, i18n } = useTranslation();
  return <h1>{t('Welcome to React')}</h1>
}

وسؤالي هو ماذا ان أردت تغيير اللغة مثلا باضافة زر للتغيير مع العلم لدي لغتين en و ar

import React from 'react';

// the hook
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t, i18n } = useTranslation();

  const changeLanguage = () => {
  //تغيير اللغة
  }
  return (
    <div>
    <button onClick={changeLang}>change</button>
      <h1>{t('Welcome to React')}</h1>
    </div>
  );
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يمكنك عمل هذا عن طريق استخدام i18n.changeLanguage التي تسمح لك بالتبديل بين قائمة اللغات الموجودة بداخل ال resources

import i18n from "i18next";

// translation catalog
const resources = {
  en: {
    translation: {
      "welcome": "Welcome to React and react-i18next"
    },
  ar: {
    translation: {
      "welcome": "أهلا بك"
    }
  }
};

// initialize i18next with catalog and language to use
i18n.init({
  resources,
  lng: "en"
});

// ####################### في المكون الخاص بك تستخدم هذه الدالة ###############################
const changeLanguage = () => {
  i18n.changeLanguage('ar');
};

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...