将脚本标签添加到 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，我不想分享。

原文由 ArrayKnight 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

---

您是想在每次渲染该组件时一次又一次地获取和执行脚本，还是仅在该组件安装到 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 ）

• 在我需要的地方 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
 }

原文由 Alex McMillan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 cdcdcd 发布，翻译遵循 CC BY-SA 3.0 许可协议