Имам сравнително прост проблем - опитвам се да добавя вграден скрипт в компонент на React. Какво имам до момента:
'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>
);
}
};
Опитах също така:
<script src="https://use.typekit.net/foobar.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
Нито един от двата подхода не изглежда да изпълни желания скрипт. Предполагам, че е нещо просто, което пропускам. Някой може ли да помогне?
PS: Не обръщайте внимание на foobar, имам реално използван id, който не ми се искаше да споделям.
Искате ли да извличате и изпълнявате скрипта отново и отново при всяко визуализиране на този компонент или само веднъж, когато този компонент се монтира в DOM?
Може би опитайте нещо подобно:
componentDidMount () {
const script = document.createElement("script");
script.src = "https://use.typekit.net/foobar.js";
script.async = true;
document.body.appendChild(script);
}
Това обаче е наистина полезно само ако скриптът, който искате да заредите, не е наличен като модул/пакет. Първо, аз винаги бих:
npm install typekit
)импортирам
пакета там, където ми е необходим (import Typekit from 'typekit';
)Вероятно така сте инсталирали пакетите react
и react-document-title
от вашия пример и има Typekit package available on npm.
Актуализация:
Сега, след като имаме куки, по-добър подход може да бъде да използваме 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);
}
}, []);
Това го прави чудесен кандидат за потребителска кука (например: 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;
Която може да се използва по следния начин:
import useScript from 'hooks/useScript';
const MyComponent = props => {
useScript('https://use.typekit.net/foobar.js');
// rest of your component
}
В допълнение към отговорите по-горе можете да направите това:
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)} />;
}
}
Дивът се свързва с this
и скриптът се инжектира в него.
Демонстрацията може да бъде намерена на codesandbox.io
Създадох компонент на React за този конкретен случай: https://github.com/coreyleelarson/react-typekit
Просто трябва да предадете идентификатора на комплекта Typekit като реквизит и можете да започнете работа.
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;