Ich habe ein relativ einfaches Problem beim Versuch, einer React-Komponente Inline-Skripte hinzuzufügen. Was ich bisher habe:

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

Ich habe auch versucht:

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

Keiner der beiden Ansätze scheint das gewünschte Skript auszuführen. Ich vermute, es ist eine einfache Sache, die mir fehlt. Kann jemand helfen?

PS: Ignoriere die Foobar, ich habe einen echten Ausweis, den ich nicht teilen wollte.

Bearbeiten: Dinge ändern sich schnell und dies ist veraltet - siehe Update

Möchten Sie das Skript jedes Mal abrufen und ausführen, wenn diese Komponente gerendert wird, oder nur einmal, wenn diese Komponente in das DOM eingebunden wird?

Vielleicht versuchen Sie so etwas:

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

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

    document.body.appendChild(script);
}

Dies ist jedoch nur dann wirklich hilfreich, wenn das zu ladende Skript nicht als Modul / Paket verfügbar ist. Erstens würde ich immer:

• Suchen Sie nach dem Paket auf npm
• Laden Sie das Paket herunter und installieren Sie es in meinem Projekt ( npm install typekit)
• importdas Paket, wo ich es brauche ( import Typekit from 'typekit';)

Auf diese Weise haben Sie wahrscheinlich die Pakete installiert reactund anhandreact-document-title Ihres Beispiels, und auf npm ist ein Typekit-Paket verfügbar .

Aktualisieren:

Jetzt, wo wir Haken haben, könnte ein besserer Ansatz darin bestehen, Folgendes zu verwenden 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);
  }
}, []);

Das macht es ein großer Kandidat für einen benutzerdefinierten Haken (zB: 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;

Welches kann so verwendet werden:

import useScript from 'hooks/useScript';

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

  // rest of your component
}

Nach den obigen Antworten können Sie Folgendes tun:

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

Das div ist gebunden thisund das Skript wird darin injiziert.

Demo finden Sie auf Codesandbox.io

Am liebsten verwende ich React Helmet - eine Komponente, mit der Sie den Dokumentenkopf auf eine Weise bearbeiten können, wie Sie es wahrscheinlich schon gewohnt sind.

z.B

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

Wenn Sie einen <script>Block in SSR (serverseitiges Rendern) benötigen, componentDidMountfunktioniert ein Ansatz mit nicht.

Sie können react-safestattdessen die Bibliothek verwenden. Der Code in React lautet:

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>

Die Antwort, die Alex Mcmillan gab, half mir am meisten, funktionierte aber für ein komplexeres Skript-Tag nicht ganz.

Ich habe seine Antwort leicht optimiert, um eine Lösung für ein langes Tag mit verschiedenen Funktionen zu finden, die zusätzlich bereits "src" gesetzt hat.

(Für meinen Anwendungsfall musste das Skript im Kopf leben, was sich auch hier widerspiegelt):

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

Ich habe eine React-Komponente für diesen speziellen Fall erstellt: https://github.com/coreyleelarson/react-typekit

Sie müssen nur Ihre Typekit Kit ID als Requisite eingeben und können loslegen.

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;

Es gibt eine sehr schöne Problemumgehung mit 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));
}

Dies funktioniert für beliebiges HTML und behält auch Kontextinformationen wie z document.currentScript.

Sie können das npm postscribeSkript in die Reaktionskomponente laden

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

Sie können auch einen Reaktionshelm verwenden

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

Der Helm verwendet einfache HTML-Tags und gibt einfache HTML-Tags aus. Es ist ganz einfach und Anfängerfreundlich reagieren.

Verwenden Sie dies für mehrere Skripte

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

Die beste Antwort finden Sie unter folgendem Link:

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

Nach der Lösung von Alex McMillan habe ich die folgende Anpassung.
Meine eigene Umgebung: Reagiere 16.8+, nächstes v9 +

// füge eine benutzerdefinierte Komponente mit dem Namen Script
// hooks / Script.js hinzu

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.
}

// Verwenden Sie das benutzerdefinierte Compoennt, importieren Sie es einfach und ersetzen Sie das alte Kleinbuchstaben- <script>Tag durch das benutzerdefinierte Camel-Case- <Script>Tag.
// 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>

Ein bisschen spät zur Party, aber ich entschied mich, meine eigene zu erstellen, nachdem ich mir die Antworten von @Alex Macmillan angesehen hatte, und zwar durch Übergabe von zwei zusätzlichen Parametern. Die Position, an der die Skripte wie oder platziert werden sollen, und das Einrichten der Asynchronisierung auf true / false ist hier:

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;

Die Art und Weise, wie Sie es aufrufen, ist genau die gleiche wie in der akzeptierten Antwort dieses Beitrags, jedoch mit zwei zusätzlichen (erneut) Parametern:

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

Verwenden Sie diesen Befehl, um JS-Dateien in ein Reaktionsprojekt zu importieren

1. Verschieben Sie die JS-Datei in das Projekt.
2. Importieren Sie die js mit dem folgenden Befehl in die Seite

Es ist einfach und leicht.

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

In meinem Fall möchte ich diese JS-Dateien in mein Reaktionsprojekt importieren.

Die Lösung hängt vom Szenario ab. Wie in meinem Fall musste ich eine kalendarische Einbettung in eine Reaktionskomponente laden.

Sucht Calendly nach einem Div und liest aus seinem data-urlAttribut und lädt einen Iframe in das Div.

Es ist alles gut, wenn Sie die Seite zum ersten Mal laden: Zuerst wird div with data-urlgerendert. Dann wird dem Körper ein kalendarisches Skript hinzugefügt. Der Browser lädt es herunter und wertet es aus, und wir gehen alle glücklich nach Hause.

Das Problem tritt auf, wenn Sie weg navigieren und dann wieder auf die Seite zurückkehren. Dieses Mal befindet sich das Skript noch im Hauptteil und der Browser lädt es nicht erneut herunter und bewertet es nicht neu.

Fix:

1. Beim componentWillUnmountSuchen und Entfernen des Skriptelements. Wiederholen Sie bei der erneuten Montage die obigen Schritte.
2. Geben Sie ein $.getScript. Es ist ein geschickter JQuery-Helfer, der eine Skript-URI und einen erfolgreichen Rückruf verwendet. Sobald das Skript geladen wurde, wertet es es aus und löst Ihren Erfolgsrückruf aus. Alles was ich tun muss ist in meinem componentDidMount $.getScript(url). Meine renderMethode hat bereits die kalendarische Div. Und es funktioniert reibungslos.