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

Adam Ebrahim · 6 مايو 2021

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

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

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

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

عبدالباسط ابراهيم · 6 مايو 2021

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

import Helmet from 'react-helmet'

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

Salah Eddin Beriani2 · 6 مايو 2021

يمكنك استخدام 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"

Abdullah Muhammad · 6 مايو 2021

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

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

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

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

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

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

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

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

السؤال

Adam Ebrahim

3 أجوبة على هذا السؤال

Recommended Posts

عبدالباسط ابراهيم

Salah Eddin Beriani2

Abdullah Muhammad

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية