1

سؤال بخصوص ترجمة موقع react باستخدام react i18next

قمت بترجمة موقع للغة العربية باستخدام اطار reacti18nextوbrowser language detectorوhttp backend

عندما يتحول الموقع للغة العربية بالفعل يتغير الاتجاه من ltr إلي rtl وتكون معظم العناصر قد تحولت ولكن بطبيعة الأمر يتبقي بعض العناصر التي تحتاج إلي تعديلها بشكل فردي.

كيف أقوم بهذا الأمر؟ هل هذا الكود في الصورة صحيح؟ لقد تغير العنصر في المرة الأولي بطريقة صحيحة ولكن بعد التحويل مرة أخري لا يعطي النتيجة بشكل صحيح.

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

0
waelaljamal أضف ردا

يمكنك إرفاق جزء البرنامج الذي يقوم بتبديل اللغة لنساعدك على اصلاح المشكلة

0
MohamedZaid999 أضف ردا 
import React, { useRef, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import i18next from "i18next";
import cookies from "js-cookie";

 const [isMenu, setIsMenu] = useState(false);


  const languages = [
    {
      code: "en",
      name: "English",
      country_code: "us",
    },
    {
      code: "ar",
      name: "العربية",
      dir: "rtl",
      country_code: "sa",
    },
  ];


  const currentLanguageCode = cookies.get("i18next") || "en";


  const currentLanguage = languages.find((l) => l.code === currentLanguageCode);


  const { t } = useTranslation();


  useEffect(() => {
    document.body.dir = currentLanguage.dir || "ltr";
  }, [currentLanguage]);

//dropdown
<div className="big_container">
            <span className="icon_span" onClick={() => setIsMenu(!isMenu)}>
              <i className="ri-global-line"></i>
            </span>
            {isMenu && (
              <div className="small_container">
                <p className="language_p">{t("language")}</p>
                {languages.map(({ code, name, country_code }) => (
                  <p key={country_code} className="language_item">
                    <button
                      className="language_item-btn"
                      onClick={() => {
                        return [i18next.changeLanguage(code), setIsMenu(false)];
                      }}
                      disabled={code === currentLanguageCode}
                    >
                      {name}
                    </button>
                  </p>
                ))}
              </div>
            )}
          </div>
0
waelaljamal أضف ردا

من الأبسط عمل إدارة للأصناف عند تبديلها وليس للمكونات ككل أي بدل التبديل بين عنصرين i نبدل الصنف لعنصر واحد، لأنه هذه الطريقة ستكون أوضح في حال التعامل مع مكونات أكبر

 <i className={{ isRTL ? 'rtl-class' : 'ltr-class' }}/>

كما أن فصل حالة الجهة ربما أبسط من الشرط الطويل لديك

const [isRTL, setIsRTL] = useState(false);

يمكن عمل حالة بوليانية للجهة، في حال كان isRTL ب true نعدل الجهة، غير ذلك لا نضيف أي صنف بوضع فراغ '' بدل الصنف المعاكس إن لم يكن هنالك داع له

isRTL ? 'rtl-class' : ''
0
MohamedZaid999 أضف ردا

شكرا

0
aliabedmohsen أضف ردا

يمكنك التحكم بالعناصر التي لا تستجيب تلقائياً لتغير إتجاه الصفحة بأكثر من إستراتيجية سواء كان إختيارك أسلوب معين في كتابة css أو من خلال التعديل على خصائص تلك العناصر بإستعمال javascript (في حالتك React).

أن إستعمالك ل flex في css قد يساعدك كثيراً في مثل هذه المشكلات. لاحظ المثال التالي

.container{
  display:flex;
  flex-direction:row; /* العرض بهيئة صف */
  justify-content:flex-start 
/*  يقوم هذا السطر بسحب العناصر بإتجاه الصفحة الحالي سواء يمين أو يسار*/
}

أيضا يمكنك إستعمال خصائص العناصر class و style للتحكم المباشر بأي element. على سبيل المثال تستفيد من التحكم في style عندما يكون العنصر أو الحاوية الرئيسية container في مكون ما component في وضع absolute , عندها نتحكم في موقعه من خلال التعديل على الخاصيتين left و right كما يلي:

...
let style={}
if(dir==="rtl"){ 
// هنا نقوم بالتحقق من أتجاه الصفحة ومن ثم تعيين الإنحراف يميناً أو يساراً حسب ما لديك 
   style.right="100px"
} else {
   style.left="100px"
}
return(
    {/* نطبق قيمة الستايل التي تم تحقيقها أعلاه */}
    <div style={style} className="absolute-container" >
    ...
    </div>
)
...
0
MohamedZaid999 أضف ردا

شكرا