التبديل بين ملفي LTR و RTL المتعلقين بالبوتستراب ضمن موقع مبني ب React.

حل هذه المشكلة يكون على عدة خطوتين:

أولاً تعيين متغير يقوم بتحديد لغة العرض الحالية.

ثانياً بانشاء دالة لاستداعاء الملف الصحيح استناداً إلى اللغة.

//  ينبغي تحديد اللغة، لنفرض أن القيمة الافتراضية لها العربية.
let language = "ar"; 

function getBootstrapCss() {
  return language === "ar" ? "bootstrap.rtl.min.css" : "bootstrap.min.css";
}

function App() {
  return (
    <div>
      <link
        rel="stylesheet"
        href={`/path/to/bootstrap/css/${getBootstrapCss()}`}
      />
      {/* Your components */}
    </div>
  );
}

انتبه لتعديل مسار ملفات css في الكود في الأعلى.

هل يمكنك مشاركة ملفات المشروع ؟

بتاريخ 53 دقائق مضت قال عمر قره محمد:

هل يمكنك مشاركة ملفات المشروع ؟

ارفقت مشروعا صغيرا يوضح نفس المشكلة
npm install
npm start

http://localhost:3000
http://localhost:3000/ar

المشكلة موجودة بالصفحتين
لكن هي واضحة أكثر ب http://localhost:3000/ar

ملف الصفحة التي باللغة الانجليزية
CompanyEn.js

أول سطر فيه

import "bootstrap/dist/css/bootstrap.min.css

ملف الصحفة التي باللغة العربية

CompanyArOne.js

أول سطر فيه
import "bootstrap/dist/css/bootstrap.rtl.min.css

عند تعليق أحد السطرين يستخدم الموقع السطر الآخر في كلا الصفحتين
أما عند الابقاء على السطرين يصبح هناك تضارب في كلا الصفحتين

test.zip

بتاريخ 38 دقائق مضت قال محمد خطيب:

حل هذه المشكلة يكون على عدة خطوتين:

أولاً تعيين متغير يقوم بتحديد لغة العرض الحالية.

ثانياً بانشاء دالة لاستداعاء الملف الصحيح استناداً إلى اللغة.

 

//  ينبغي تحديد اللغة، لنفرض أن القيمة الافتراضية لها العربية.
let language = "ar"; 

function getBootstrapCss() {
  return language === "ar" ? "bootstrap.rtl.min.css" : "bootstrap.min.css";
}

function App() {
  return (
    <div>
      <link
        rel="stylesheet"
        href={`/path/to/bootstrap/css/${getBootstrapCss()}`}
      />
      {/* Your components */}
    </div>
  );
}

انتبه لتعديل مسار ملفات css في الكود في الأعلى.

شكرا لك نجحت الطريقة لكن عن طريق استدعاء الملفات المتعلقة ب ال Bootstrap ب ال CDN 

لكن:
من خلال المسار الذي قمت أنت بكتابه

href={`/path/to/bootstrap/css/${getBootstrapCss()}`}

كيف أصل إلى مجلد

node_modules

أم أنه حصرا يتوجب علي إضافة الملفات بمجلد ال Public داخل مشروع ال React ؟

وشكرا جزيلا لك.

اضافة اللغة العربية لا يلزم ان تقوم بفص الصفحات التي تدعم العربية عن الأنجليزية 

افضل طريقه هي بعمل العناصر الموقع بالكامل اوكل قسم باللغه الأنجليزية اولا ثم العربيه لأن التغيرات ستكون بسيطه

اما عن استخدام rtl في bootstrap فكما ذكر الأستاذ محمد الخطيب في التعليق السابق وهو بالتحكم في اتجاة الصفحه عن طريق الأب بدلاً من كل عنصر بمفرده 

وستقوم بعمل ملف css للتعديلات التي ستحتاجها عند التحويل الي العربية ويتم ربطه بنفس الطريقه

وبالنسبة للمحتوي نفسه فسنجعله ديناميكي بأن نقوم بعمل ملف js لكل لغه في كل ملف object في ه جميع النصوص التي ستتخدم في الموقع 

ومن ثم قم بإستدعائها وربطها

const data = {
  title: "hello",
  link: "google.com",
};

export default data;

او اجعل نوع الملف json او قم بعمل fetch  ان كان سيتم ربط الموقع في المستقبل بال back-end 

لا تهم الطريقه النتيجه واحدة 

بتاريخ 1 ساعة قال Mohammed Ammar Ammar:

ارفقت مشروعا صغيرا يوضح نفس المشكلة
npm install
npm start

http://localhost:3000
http://localhost:3000/ar

المشكلة موجودة بالصفحتين
لكن هي واضحة أكثر ب http://localhost:3000/ar

ملف الصفحة التي باللغة الانجليزية
CompanyEn.js

أول سطر فيه

import "bootstrap/dist/css/bootstrap.min.css

 

ملف الصحفة التي باللغة العربية

CompanyArOne.js

أول سطر فيه
import "bootstrap/dist/css/bootstrap.rtl.min.css

 

عند تعليق أحد السطرين يستخدم الموقع السطر الآخر في كلا الصفحتين
أما عند الابقاء على السطرين يصبح هناك تضارب في كلا الصفحتين

test.zip 2.77 MB · 12 تنزيلات

 

 

شكرا لك نجحت الطريقة لكن عن طريق استدعاء الملفات المتعلقة ب ال Bootstrap ب ال CDN 

لكن:
من خلال المسار الذي قمت أنت بكتابه

href={`/path/to/bootstrap/css/${getBootstrapCss()}`}

كيف أصل إلى مجلد

node_modules

أم أنه حصرا يتوجب علي إضافة الملفات بمجلد ال Public داخل مشروع ال React ؟

وشكرا جزيلا لك.

يمكنك القيام بشيء ما مثل :

export default function MainRoutes() {
	const [lan, setLan] = useState("en");
	return (
		<Router>
			<Routes>
				{lan === "en" && <Route path='/' element={<CompanyEn />} />}
				{/* <Route path='/ar' element={ <CompanyEn /> } /> */}
				{lan === "ar" && <Route path='/ar' element={<CompanyArOne />} />}
			</Routes>
		</Router>
	);
}

وبهذه الطريقة لن يتم تحميل اي ملف من المكون العربي إلا إذا كانت اللغة عربية ولن يتم تحميل اي مكون من اللانجليزي إلا اذا كانت انجليزية.

ويمكنك اضافة الشرط لأكثر من مكون مثل :

export default function MainRoutes() {
	const [lan, setLan] = useState("en");
	return (
		<>

			{lan === "en" &&
				<Routes>
					<Route path='/' element={<CompanyEn />} />
					<Route path='/example' element={<Example />} />
				</Routes>
			}{lan === "ar" &&
				<Router>
					<Route path='/ar' element={<CompanyArOne />} />
					<Route path='/ar/example' element={<Example />} />
				</Router>
			}
		</>
	);
}