قمت بترجمة موقع للغة العربية باستخدام اطار reacti18nextوbrowser language detectorوhttp backend
عندما يتحول الموقع للغة العربية بالفعل يتغير الاتجاه من ltr إلي rtl وتكون معظم العناصر قد تحولت ولكن بطبيعة الأمر يتبقي بعض العناصر التي تحتاج إلي تعديلها بشكل فردي.
كيف أقوم بهذا الأمر؟ هل هذا الكود في الصورة صحيح؟ لقد تغير العنصر في المرة الأولي بطريقة صحيحة ولكن بعد التحويل مرة أخري لا يعطي النتيجة بشكل صحيح.
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>
من الأبسط عمل إدارة للأصناف عند تبديلها وليس للمكونات ككل أي بدل التبديل بين عنصرين i نبدل الصنف لعنصر واحد، لأنه هذه الطريقة ستكون أوضح في حال التعامل مع مكونات أكبر
<i className={{ isRTL ? 'rtl-class' : 'ltr-class' }}/>
كما أن فصل حالة الجهة ربما أبسط من الشرط الطويل لديك
const [isRTL, setIsRTL] = useState(false);
يمكن عمل حالة بوليانية للجهة، في حال كان isRTL ب true نعدل الجهة، غير ذلك لا نضيف أي صنف بوضع فراغ '' بدل الصنف المعاكس إن لم يكن هنالك داع له
isRTL ? 'rtl-class' : ''
يمكنك التحكم بالعناصر التي لا تستجيب تلقائياً لتغير إتجاه الصفحة بأكثر من إستراتيجية سواء كان إختيارك أسلوب معين في كتابة 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>
)
...
التعليقات