Saya memiliki masalah yang relatif mudah mencoba menambahkan skrip sebaris ke komponen Bereaksi. Apa yang saya miliki sejauh ini:

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

Saya juga sudah mencoba:

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

Tidak ada pendekatan yang menjalankan skrip yang diinginkan. Saya kira itu hal sederhana yang saya lewatkan. Adakah yang bisa membantu?

PS: Abaikan foobar itu, sebenarnya saya punya id yang sebenarnya saya tidak suka berbagi.

Sunting: Hal berubah dengan cepat dan ini sudah ketinggalan zaman - lihat pembaruan

Apakah Anda ingin mengambil dan menjalankan skrip berulang kali, setiap kali komponen ini dirender, atau hanya sekali ketika komponen ini dipasang ke DOM?

Mungkin coba sesuatu seperti ini:

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

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

    document.body.appendChild(script);
}

Namun, ini hanya sangat membantu jika skrip yang ingin Anda muat tidak tersedia sebagai modul / paket. Pertama, saya akan selalu:

• Cari paket di npm
• Unduh dan instal paket di proyek saya ( npm install typekit)
• importpaket tempat saya membutuhkannya ( import Typekit from 'typekit';)

Ini kemungkinan cara Anda menginstal paket reactdan react-document-titledari contoh Anda, dan ada paket Typekit yang tersedia di npm .

Memperbarui:

Sekarang kita memiliki kait, pendekatan yang lebih baik mungkin digunakan useEffectseperti:

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);
  }
}, []);

Yang menjadikannya kandidat yang tepat untuk pengait kustom (mis .:) 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;

Yang bisa digunakan seperti ini:

import useScript from 'hooks/useScript';

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

  // rest of your component
}

Lebih jauh ke jawaban di atas Anda dapat melakukan ini:

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 terikat thisdan skrip disuntikkan ke dalamnya.

Demo dapat ditemukan di codesandbox.io

Cara favorit saya adalah menggunakan React Helmet - ini adalah komponen yang memungkinkan manipulasi kepala dokumen dengan mudah dengan cara yang mungkin sudah biasa Anda lakukan.

misalnya

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

Jika Anda perlu memiliki <script>blok di SSR (rendering sisi-server), pendekatan dengan componentDidMounttidak akan berfungsi.

Anda dapat menggunakan react-safeperpustakaan sebagai gantinya. Kode dalam Bereaksi adalah:

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>

Jawabannya Alex Mcmillan membantu saya tetapi tidak cukup berhasil untuk tag skrip yang lebih kompleks.

Saya sedikit mengutak-atik jawabannya untuk menghasilkan solusi untuk tag panjang dengan berbagai fungsi yang juga sudah diatur "src".

(Untuk kasus penggunaan saya, skrip harus hidup dalam kepala yang tercermin di sini juga):

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

Saya membuat komponen Bereaksi untuk kasus khusus ini: https://github.com/coreyleelarson/react-typekit

Hanya perlu memasukkan ID Kit Typekit Anda sebagai alat peraga dan Anda siap melakukannya.

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;

Ada solusi yang sangat bagus menggunakan 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));
}

Ini berfungsi untuk HTML sewenang-wenang dan juga menyimpan informasi konteks seperti document.currentScript.

Anda dapat menggunakan npm postscribeuntuk memuat skrip di komponen reaksi

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

Anda juga dapat menggunakan helm reaksi

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

Helm mengambil tag HTML biasa dan menghasilkan tag HTML biasa. Ini sederhana, dan Bereaksi ramah pemula.

untuk banyak skrip, gunakan ini

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

Anda dapat menemukan jawaban terbaik di tautan berikut:

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

Menurut solusi Alex McMillan , saya memiliki adaptasi berikut.
Lingkungan saya sendiri: React 16.8+, v9 + berikutnya

// tambahkan komponen khusus bernama Script
// 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.
}

// Gunakan kompoennt khusus, cukup impor dan gantikan <script>tag huruf kecil lama dengan <Script>tag case unta kustom sudah cukup.
// 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>

Sedikit terlambat ke pesta tetapi saya memutuskan untuk membuat yang saya sendiri setelah melihat jawaban @Alex Macmillan dan itu dengan melewati dua parameter tambahan; posisi di mana menempatkan skrip seperti atau dan mengatur async ke true / false, ini dia:

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;

Cara untuk memanggilnya persis sama dengan yang ditunjukkan pada jawaban yang diterima dari pos ini tetapi dengan dua parameter tambahan (lagi):

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

Untuk mengimpor file JS dalam proyek reaksi gunakan commange ini

1. Pindahkan file JS ke proyek.
2. impor js ke halaman menggunakan perintah berikut

Sederhana dan mudah.

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

Dalam kasus saya, saya ingin mengimpor file JS ini dalam proyek reaksi saya.

Solusi tergantung pada skenario. Seperti dalam kasus saya, saya harus memuat embed kalender di dalam komponen reaksi.

Calendly mencari div dan membaca dari data-urlatribut itu dan memuat iframe di dalam div tersebut.

Semuanya baik ketika Anda pertama kali memuat halaman: pertama, div dengan data-url diberikan. Kemudian skrip calendly ditambahkan ke tubuh. Browser mengunduh dan mengevaluasinya dan kami semua pulang dengan senang hati.

Masalah muncul ketika Anda menavigasi lalu kembali ke halaman. Kali ini skrip masih dalam tubuh dan browser tidak mengunduh ulang & mengevaluasi ulang itu.

Memperbaiki:

1. Saat componentWillUnmountmenemukan dan menghapus elemen skrip. Kemudian saat dipasang kembali, ulangi langkah-langkah di atas.
2. Masukkan $.getScript. Ini adalah penolong jquery yang bagus yang mengambil skrip URI dan panggilan balik sukses. Setelah skrip dimuat, ia mengevaluasi dan menjalankan panggilan balik sukses Anda. Yang harus saya lakukan adalah di componentDidMount $.getScript(url). renderMetode saya sudah memiliki div kalender. Dan itu bekerja dengan lancar.