我有一个相对简单的问题,试图将内联脚本添加到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
import Typekit from 'typekit';
这可能是您安装软件包的方式react以及react-document-title您的示例,并且npm上有一个Typekit软件包。
react
react-document-title
现在我们有了钩子,更好的方法可能是这样使用useEffect:
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:
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 }