• 0

كيفية إضافة class إلى عنصر body بإستخدام React؟

 

أريد أن أضيف classes بطريقة ديناميكية للعنصر body ولكن 

إن العنصر body خارج نطاق React، ولهذا السبب لا يمكنني معرفة كيفية تغيير أي class عندما أتنقل من صفحة إلى أخرى. هذا هو بالضبط ما أحتاجه لأنني أريد تغيير خلفية جسم الصفحة عند الإنتقال من صفحة لأخر ى من خلال إضافة صنف معين وإزالته على حسب الصفحة المتواجد فيها المستخدم.

أستخدم React مع Gatsby (أحدث إصدار)

كيف أقوم بهذا الأمر؟

انشر على الشّبكات الاجتماعية


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

يمكنك استخدام الإضافة 'react-helmet'  لإضافة بعض الخصائص لل body ومنها يمكنك إضافة وتغيير ال className وستكون الكود كالتالي

import Helmet from 'react-helmet'

<Helmet>
    <body className="class-name" />
</Helmet>

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


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

يمكنك استخدام react-body-classname 

npm install --save react-body-classname

وهذا مثال عن كيفية الاستخدام من التوثيق الرسمي 

import BodyClassName from 'react-body-classname';

const Basic = () => (
  <BodyClassName className="helloworld">
    <h1>You ate a whole wheel of cheese?</h1>
  </BodyClassName>
);
// -> document.body.className === "helloworld"

const Nested = () => (
  <BodyClassName className="outside">
    <div>
      <BodyClassName className="inside">
        <p>I‘m not even mad</p>
      </BodyClassName>
    </div>
  </BodyClassName>
);
// -> document.body.className === "outside inside"

 

انشر على الشّبكات الاجتماعية


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

يمكنك بالفعل القيام بكل ذلك حتى بدون إستخدام أي أدوات خارجيه وذلك من خلال جافا سكريبت 

بكل بساطة يمكنك إضافة الكلاس كالتالي عند دخولك إلى المسار المطلوب 

document.body.classList.add("home")

وبكل بساطة يمكنك إستخدام useEffect لحذف ال class المستخدم بمجرد خروجك من هذا المسار كالتالي

useEffect(() => {
    return () => document.body.classList.remove("home")
},[])

وبالتالي بعد إعداد ال classes الخاصة بكل مسار سوف يتم تغير class ال body عند الدخول إلى مسار جديد أو عند الخروج منه.

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

انشر على الشّبكات الاجتماعية


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

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن