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

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

Adam Ebrahim

السؤال

 

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

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

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

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

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

Recommended Posts

  • 0

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

import Helmet from 'react-helmet'

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

 

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

  • 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 عند الدخول إلى مسار جديد أو عند الخروج منه.

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

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...