将脚本标签添加到React / JSX

前端Tom 2020.03.10

componentDidMount() {
  const head = document.querySelector("head");
  const script = document.createElement("script");
  script.setAttribute(
    "src",
    "https://assets.calendly.com/assets/external/widget.js"
  );
  head.appendChild(script);
}

樱L 2020.03.10

尝试了所有建议的解决方案，但没有任何效果。我试图将其嵌入到组件中，但未加载。这是来自bannersnack.com的横幅。

<script type="text/javascript">
var bannersnack_embed = {"hash":"bxpien9pr","width":1190,"height":300,"t":1559889975,"userId":39254375,"responsive":true,"type":"html5"};
</script>
<script type="text/javascript" src="//cdn.bannersnack.com/iframe/embed.js"></script>

Tony小卤蛋 2020.03.10

亚历克斯·麦克米伦（Alex Mcmillan）提供的答案对我最大的帮助，但对于更复杂的脚本标签而言，效果并不理想。

我略微调整了他的答案，以提供一个具有各种功能的长标签解决方案，该功能还已经设置了“ src”。

（对于我的用例，脚本也需要放在头部，这也反映在这里）：

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

      const scriptText = document.createTextNode("complex script with functions i.e. everything that would go inside the script tags");

      script.appendChild(scriptText);
      document.head.appendChild(script);
  }

Sam飞云 2020.03.10

如果您需要<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>

逆天樱 2020.03.10

我最喜欢的方式是使用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