Bir React bileşenine satır içi komut dosyası eklemeye çalışırken nispeten basit bir sorun var. Şimdiye kadar ne var:

'use strict';

import '../../styles/pages/people.scss';

import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';

import { prefix } from '../../core/util';

export default class extends Component {
    render() {
        return (
            <DocumentTitle title="People">
                <article className={[prefix('people'), prefix('people', 'index')].join(' ')}>
                    <h1 className="tk-brandon-grotesque">People</h1>

                    <script src="https://use.typekit.net/foobar.js"></script>
                    <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>
                </article>
            </DocumentTitle>
        );
    }
};

Ayrıca denedim:

<script src="https://use.typekit.net/foobar.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

Her iki yaklaşım da istenen komut dosyasını yürütmüyor gibi görünüyor. Sanırım basit bir şey eksik. Birisi yardım edebilir mi?

Not: Foobar'ı görmezden gelin, aslında kullanımda paylaşmak istemediğim gerçek bir kimliğim var.

Düzenleme: İşler hızlı değişiyor ve bu modası geçmiş - güncellemeye bakın

Komut dosyasını tekrar tekrar, bu bileşen her oluşturulduğunda veya bu bileşen DOM'ye takıldığında yalnızca bir kez almak ve yürütmek istiyor musunuz?

Belki de böyle bir şey deneyin:

componentDidMount () {
    const script = document.createElement("script");

    script.src = "https://use.typekit.net/foobar.js";
    script.async = true;

    document.body.appendChild(script);
}

Ancak, bu yalnızca yüklemek istediğiniz komut dosyası modül / paket olarak mevcut değilse gerçekten yararlıdır. İlk olarak, her zaman:

• Paketi npm'de arayın
• Paketi projeme indirip kur ( npm install typekit)
• importİhtiyacım olan paket ( import Typekit from 'typekit';)

Muhtemelen paketleri nasıl kuracağınız reactve react-document-titleörneğin budur ve npm'de bir Typekit paketi bulunmaktadır .

Güncelleme:

Artık kancalarımız olduğuna göre, daha iyi bir yaklaşım şu şekilde kullanmak olabilir useEffect:

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

  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;

  document.body.appendChild(script);

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

Bu da özel bir kanca için harika bir aday olmasını sağlar (örneğin:) hooks/useScript.js:

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;

Hangi gibi kullanılabilir:

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');

  // rest of your component
}

Yukarıdaki cevaplara ek olarak bunu yapabilirsiniz:

import React from 'react';

export default class Test extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.innerHTML = "document.write('This is output by document.write()!')";
    this.instance.appendChild(s);
  }

  render() {
    return <div ref={el => (this.instance = el)} />;
  }
}

Div bağlı this ve script içine enjekte edilir.

Demoyu codesandbox.io adresinde bulabilirsiniz.

En sevdiğim yol React Helmet'i kullanmaktır - bu, belge kafasının muhtemelen alıştığınız bir şekilde kolayca değiştirilmesini sağlayan bir bileşendir.

Örneğin

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <script src="https://use.typekit.net/foobar.js"></script>
                <script>try{Typekit.load({ async: true });}catch(e){}</script>
            </Helmet>
            ...
        </div>
    );
  }
};

https://github.com/nfl/react-helmet

<script>SSR'de (sunucu tarafı oluşturma) engellemeniz gerekiyorsa , ile bir yaklaşım componentDidMountçalışmaz.

Bunun react-safeyerine kitaplığı kullanabilirsiniz . React içindeki kod:

import Safe from "react-safe"

// in render 
<Safe.script src="https://use.typekit.net/foobar.js"></Safe.script>
<Safe.script>{
  `try{Typekit.load({ async: true });}catch(e){}`
}
</Safe.script>

Alex Mcmillan'ın verdiği cevap bana en çok yardımcı oldu, ancak daha karmaşık bir komut dosyası etiketi için pek işe yaramadı.

Ben zaten ek olarak "src" ayarlanmış çeşitli fonksiyonları ile uzun bir etiket için bir çözüm bulmak için biraz cevap tweaked.

(Benim kullanım durumum için betiğin burada da yansıyan kafasında yaşaması gerekiyordu):

  componentWillMount () {
      const script = document.createElement("script");

      const scriptText = document.createTextNode("complex script with functions i.e. everything that would go inside the script tags");

      script.appendChild(scriptText);
      document.head.appendChild(script);
  }

Bu özel durum için bir React bileşeni oluşturdum: https://github.com/coreyleelarson/react-typekit

Sadece Typekit Kit ID'nizi bir pervane olarak geçmeniz gerekiyor ve gitmeye hazırsınız.

import React from 'react';
import Typekit from 'react-typekit';

const HtmlLayout = () => (
  <html>
    <body>
      <h1>My Example React Component</h1>
      <Typekit kitId="abc123" />
    </body>
  </html>
);

export default HtmlLayout;

Kullanarak çok güzel bir geçici çözüm var Range.createContextualFragment.

/**
 * Like React's dangerouslySetInnerHTML, but also with JS evaluation.
 * Usage:
 *   <div ref={setDangerousHtml.bind(null, html)}/>
 */
function setDangerousHtml(html, el) {
    if(el === null) return;
    const range = document.createRange();
    range.selectNodeContents(el);
    range.deleteContents();
    el.appendChild(range.createContextualFragment(html));
}

Bu, rastgele HTML için çalışır ve ayrıca bağlam bilgilerini de korur document.currentScript.

npm postscribeReaksiyon bileşenine komut dosyası yüklemek için kullanabilirsiniz

postscribe('#mydiv', '<script src="https://use.typekit.net/foobar.js"></script>')

Tepki kaskını da kullanabilirsiniz

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://example.com/example" />
                <script src="/path/to/resource.js" type="text/javascript" />
            </Helmet>
            ...
        </div>
    );
  }
};

Kask düz HTML etiketleri alır ve düz HTML etiketleri çıkarır. Çok basit ve React acemi dostudur.

birden fazla komut dosyası için bunu kullanın

var loadScript = function(src) {
  var tag = document.createElement('script');
  tag.async = false;
  tag.src = src;
  document.getElementsByTagName('body').appendChild(tag);
}
loadScript('//cdnjs.com/some/library.js')
loadScript('//cdnjs.com/some/other/library.js')

componentDidMount() {
  const head = document.querySelector("head");
  const script = document.createElement("script");
  script.setAttribute(
    "src",
    "https://assets.calendly.com/assets/external/widget.js"
  );
  head.appendChild(script);
}

En iyi yanıtı aşağıdaki bağlantıda bulabilirsiniz:

https://cleverbeagle.com/blog/articles/tutorial-how-to-load-third-party-scripts-dynamically-in-javascript

const loadDynamicScript = (callback) => {
const existingScript = document.getElementById('scriptId');

if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'url'; // URL for the third-party library being loaded.
    script.id = 'libraryName'; // e.g., googleMaps or stripe
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

Göre Alex McMillan 'ın çözümü, ben şu adaptasyon var.
Kendi ortamım: React 16.8+, sonraki v9 +

// Script adlı özel bir bileşen ekleyin
// hooks / Script.js

import { useEffect } from 'react'

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

    script.src = url
    script.async = (typeof async === 'undefined' ? true : async )

    document.body.appendChild(script)

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

export default function Script({ src, async=true}) {

  useScript(src, async)

  return null  // Return null is necessary for the moment.
}

// Özel bileşimi kullanın, sadece içe aktarın ve eski küçük harf <script>etiketini özel deve kasa <Script>etiketiyle değiştirin.
// index.js

import Script from "../hooks/Script";

<Fragment>
  {/* Google Map */}
  <div ref={el => this.el = el} className="gmap"></div>

  {/* Old html script */}
  {/*<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>*/}

  {/* new custom Script component */}
  <Script src='http://maps.google.com/maps/api/js' async={false} />
</Fragment>

Partiye biraz geç kaldım ama @Alex Macmillan cevaplarına baktıktan sonra kendiminkini oluşturmaya karar verdim ve bu iki ekstra parametre geçirerek oldu; veya gibi komut dosyalarının yerleştirileceği ve async'in true / false olarak ayarlandığı konum, işte burada:

import { useEffect } from 'react';

const useScript = (url, position, async) => {
  useEffect(() => {
    const placement = document.querySelector(position);
    const script = document.createElement('script');

    script.src = url;
    script.async = typeof async === 'undefined' ? true : async;

    placement.appendChild(script);

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

export default useScript;

Onu çağırmanın yolu, bu gönderinin kabul edilen cevabında gösterilenle tamamen aynıdır, ancak iki ekstra (tekrar) parametresiyle:

// First string is your URL
// Second string can be head or body
// Third parameter is true or false.
useScript("string", "string", bool);

Reaksiyon projesinde JS dosyalarını içe aktarmak için bu komutayı kullanın

1. JS dosyasını projeye taşıyın.
2. js'yi aşağıdaki komutu kullanarak sayfaya aktarın

Çok basit ve kolaydır.

import  '../assets/js/jquery.min';
import  '../assets/js/popper.min';
import  '../assets/js/bootstrap.min';

Benim durumumda, bu JS dosyalarını tepki projeme aktarmak istiyorum.

Çözüm senaryoya bağlıdır. Benim durumumda olduğu gibi, bir reaksiyon bileşeninin içine sakin bir şekilde gömmek zorunda kaldım.

Calendly bir div arar ve data-urlözniteliğinden okur ve adı geçen div içine bir iframe yükler.

Sayfayı ilk yüklediğinizde her şey iyidir: ilk olarak div ile data-urlişlenir. Daha sonra vücuda calendly komut dosyası eklenir. Tarayıcı indirir ve değerlendirir ve hepimiz mutlu oluruz.

Sorun, uzaklaşıp sonra sayfaya geri geldiğinizde ortaya çıkar. Bu sefer komut dosyası hala gövdede ve tarayıcı yeniden indirmiyor ve yeniden değerlendirmiyor.

Düzeltme:

1. Açık componentWillUnmountbulup komut elemanını çıkarın. Ardından yeniden takarken yukarıdaki adımları tekrarlayın.
2. Enter $.getScript. Bir komut dosyası URI'sı ve başarılı bir geri arama alan bir şık jquery yardımcısıdır. Komut dosyası yüklendikten sonra onu değerlendirir ve başarılı geri aramanızı başlatır. Tek yapmam gereken benim içimde componentDidMount $.getScript(url). Benim renderyöntem zaten calendly div var. Ve düzgün çalışıyor.