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.
javascript
reactjs
ecmascript-6
react-jsx
ArrayKnight
quelle
quelle
DocumentTitle
.Antworten:
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:
Dies ist jedoch nur dann wirklich hilfreich, wenn das zu ladende Skript nicht als Modul / Paket verfügbar ist. Erstens würde ich immer:
npm install typekit
)import
das Paket, wo ich es brauche (import Typekit from 'typekit';
)Auf diese Weise haben Sie wahrscheinlich die Pakete installiert
react
und 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
:Das macht es ein großer Kandidat für einen benutzerdefinierten Haken (zB:
hooks/useScript.js
):Welches kann so verwendet werden:
quelle
try{Typekit.load({ async: true });}catch(e){}
appendChild
componentDidMount
Funktion heruntergeladen hatte und das Skript auf der Seite angehängt, haben Sie diejQuery
und$
Objekte global verfügbar (zB: aufwindow
).Nach den obigen Antworten können Sie Folgendes tun:
Das div ist gebunden
this
und das Skript wird darin injiziert.Demo finden Sie auf Codesandbox.io
quelle
this.instance
an die Referenz in Ihrer Rendermethode gebunden. Ich habe einen Demo-Link hinzugefügt, um zu zeigen, dass es funktioniertdocument
,window
. Also bevorzuge ich das npm-global
PaketAm 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
https://github.com/nfl/react-helmet
quelle
async="true"
dem<script>
Tag hinzugefügt habe, das dem Code jQuery hinzugefügt hat.async=true
und scheitert ohne es?Wenn Sie einen
<script>
Block in SSR (serverseitiges Rendern) benötigen,componentDidMount
funktioniert ein Ansatz mit nicht.Sie können
react-safe
stattdessen die Bibliothek verwenden. Der Code in React lautet:quelle
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):
quelle
document.head.removeChild(script);
Ihren Code hinzufügen , oder Sie erstellen eine unendliche Anzahl von Skript-Tags in Ihrem HTML, solange der Benutzer dieseIch 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.
quelle
Es gibt eine sehr schöne Problemumgehung mit
Range.createContextualFragment
.Dies funktioniert für beliebiges HTML und behält auch Kontextinformationen wie z
document.currentScript
.quelle
Sie können das
npm postscribe
Skript in die Reaktionskomponente ladenquelle
Sie können auch einen Reaktionshelm verwenden
Der Helm verwendet einfache HTML-Tags und gibt einfache HTML-Tags aus. Es ist ganz einfach und Anfängerfreundlich reagieren.
quelle
Verwenden Sie dies für mehrere Skripte
quelle
quelle
Die beste Antwort finden Sie unter folgendem Link:
https://cleverbeagle.com/blog/articles/tutorial-how-to-load-third-party-scripts-dynamically-in-javascript
quelle
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
// 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
quelle
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:
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:
quelle
Verwenden Sie diesen Befehl, um JS-Dateien in ein Reaktionsprojekt zu importieren
Es ist einfach und leicht.
In meinem Fall möchte ich diese JS-Dateien in mein Reaktionsprojekt importieren.
quelle
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-url
Attribut 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-url
gerendert. 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:
componentWillUnmount
Suchen und Entfernen des Skriptelements. Wiederholen Sie bei der erneuten Montage die obigen Schritte.$.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 meinemcomponentDidMount
$.getScript(url)
. Meinerender
Methode hat bereits die kalendarische Div. Und es funktioniert reibungslos.quelle