将脚本标签添加到React / JSX

MandyL2020-03-10

我有一个相对简单的问题，试图将内联脚本添加到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正在使用，而我不想共享。

前端Tom2020/03/10 14:01:54

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);
}

樱L2020/03/10 14:01:54

尝试了所有建议的解决方案，但没有任何效果。我试图将其嵌入到组件中，但未加载。这是来自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 14:01:54

亚历克斯·麦克米伦（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 14:01:54

如果您需要<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 14:01:54

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer