• 0

مشكلة في إضافة script خارجي في React - Gatsby؟

لدي كود جافاسكريبت وأريد أن أقوم بإضافته في مكون لدي، هذا هو كود المكون:

import React from 'react'
import Link from 'gatsby-link'


let test ="<script type='text/javascript'>
(function(d, s) {
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = 'https://example.com/app.js';
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }
}(document, 'script'));
</script>"

const Component = () => (
    <>
        <div dangerouslySetInnerHTML={{ __html: test }} />
    </>
)

export default Component

كما هو ظاهر فقد حاولت أن أستعمل dangerouslySetInnerHTML لكن مازالت المشكلة موجودة . هل توجد طريقة أفضل لتضمين أكود جافاسكريبت في مكون React؟ وهل هناك مكان بديل في Gatsby لإضافة جميع السكريبتات مثل Google Analytics و animate.js أو أي شيء آخر قد أحتاجه؟

 

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


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

لما لا تقوم فقط بتحميله تزامنيا ثم تضمينه بالصفحة ؟ 

componentDidMount() {
  // script إنشاء عنصر بوسم 
  const script = document.createElement("script");
  
  // تعريف المسار أو الرابط
  script.src = "/path/to/my_scripts.js";
  
  // تفعيل التزامن و الوصول اليه 
  script.async = true;
  script.onload = () => this.scriptLoaded();
  
  // تضمينه في البودي
  document.body.appendChild(script);
}

 

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

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


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

يمكنك وضع الكود في ملف خارجي أولا لأن هذا موصى به داءما 

(function(d, s) {
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = 'https://example.com/app.js';
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }
}(document, 'script'));

بعدها يمكنك استخدام react-helmet لحقنه ك script

import {Helmet} from "react-helmet";

const Demo = props => (
<div className="application">
            <Helmet>
              <script src="/path/to/script.js" type="text/javascript" />
            </Helmet>
            ...
        </div>
  
);

او يمكنك استيراده عن تحميل المكون لأول مرة 

import React, { useEffect } from 'react';
import Link from 'gatsby-link';

const Component = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = '/path/to/script.js';
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, []);
  return <>...</>;
};

export default Component;

 

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


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

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

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

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


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

تسجيل الدخول

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


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