编辑：事情变化很快，这已经过时了 - 请参阅更新

你想一次又一次地获取和执行脚本，每次渲染这个组件时，还是当这个组件被挂载到 DOM 时才一次？

也许尝试这样的事情：

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

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

    document.body.appendChild(script);
}

但是，这仅在您要加载的脚本不能作为module/包使用时才真正有用。首先，我总是：

• 在npm上查找包
• 在我的项目中下载并安装包 ( npm install typekit)
• import我需要的包裹 ( import Typekit from '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
}

我最喜欢的方法是使用 React Helmet——它是一个组件，允许以您可能已经习惯的方式轻松操作文档头。

例如

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <script src="https://use.typekit.net/foobar.js"></script>
                <script>try{Typekit.load({ async: true });}catch(e){}</script>
            </Helmet>
            ...
        </div>
    );
  }
};

https://github.com/nfl/react-helmet

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

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脚本被注入其中。

可以在codeandbox.io上找到演示

如果您需要<script>在 SSR（服务器端渲染）中设置块，使用 的方法componentDidMount将不起作用。

您可以改用react-safe库。React 中的代码将是：

import Safe from "react-safe"

// in render 
<Safe.script src="https://use.typekit.net/foobar.js"></Safe.script>
<Safe.script>{
  `try{Typekit.load({ async: true });}catch(e){}`
}
</Safe.script>

这样的回答解释了为什么这种行为背后。

任何方式来呈现的script预期标签不工作：

1. 将script标签用于外部脚本
2. 使用 dangerouslySetInnerHTML

为什么

React DOM（react on web 的渲染器）使用createElement调用将 JSX 渲染为 DOM 元素。

createElement使用innerHTMLDOM API 最终将这些添加到 DOM（参见 React 源代码中的代码）。innerHTML 不执行script作为安全考虑添加的标签。这就是为什么script在 React 中渲染标签不能按预期工作的原因。

有关如何script在 React 中使用标签，请查看此页面上的其他一些答案。