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

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

Adam Ebrahim

السؤال

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

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 أو أي شيء آخر قد أحتاجه؟

 

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

Recommended Posts

  • 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);
}

 

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

  • 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;

 

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...