向React/JSX添加脚本标记

Question

我有一个比较简单的问题，就是尝试将内联脚本添加到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实际上在使用，我不想分享。

Answer 1

除了上面的答案之外,您还可以执行以下操作：

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上找到演示

Answer 2

您想要一次又一次地获取并执行脚本吗，每次呈现此组件时，还是只在将此组件挂载到DOM中时执行一次？

也许可以试试这样的方法：

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

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

    document.body.appendChild(script);
}

但是，只有当您要加载的脚本不能作为模块/包使用时，这才是真正有帮助的。首先，我总是：

• 在NPM上查找包
• 下载并安装我的项目中的包(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
}