كيفية إستخدام عنصر script مع Reactjs؟

لا يمكن إستخدام عناصر script في أي حالة من الحالات الآتية:

• إستخدام رابط ملف جافاسكريبت خارجي 
• إستخدام الكائن dangerouslySetInnerHTML

والسبب في ذلك هو أن الكائن React DOM (المسئول عن عرض مكونات React في الصفحة) يستخدم التابع createElement لتحويل كود JSX إلى عناصر HTML عادية، بعد ذلك يتم إستخدام التابع innerHTML لعرض هذه العناصر في الصفحة، وهذا التابع الآخير لا يقوم بتنفيذ عناصر Script لأسباب أمنية، وهذا هو السبب في أن عناصر script لن تعمل في مكونات react.

لكن الأمر أصبح أسهل في النسخ الحديثة من react وأصبح من الممكن إستخدام useEffect لتحميل وتنفيذ أكواد جافاسكريبت الخارجية، وهنا مثال:

import { useEffect } from 'react';

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = url;
    script.async = true;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    }
  }, [url]);
};

export default useScript;

ويمكن إستخدام الـ Hook السابق بالطريقة التالية:

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://example.com/JsFile.js');

  // باقي أكواد المكون هنا
}

بالطريقة السابقة يمكن تحميل وإستدعاء أكواد جافاسكريبت (مثل ملفات jQuery أو Stripe أو  Google Analytics إلخ).