我有一个比较简单的问题，就是尝试将内联脚本添加到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)导入需要它的包(从“Typekit”导入Typekit；)这可能是您安装示例中的react和react-document-title包的方式，并且在NPM上有一个Typekit包可用。
现在我们有了钩子，更好的方法可能是使用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)} />;
}
}
div被绑定到this，脚本被注入其中。
可以在CodeSandBox.io上找到演示
