将脚本标签添加到 React/JSX [英] Adding script tag to React/JSX

问题描述

我有一个相对简单的问题，即尝试向 React 组件添加内联脚本.到目前为止我所拥有的:

I have a relatively straightforward issue of trying to add inline scripting to a React component. What I have so far:

'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>

这两种方法似乎都无法执行所需的脚本.我猜这是我错过的一件简单的事情.有人可以帮忙吗?

Neither approach seems to execute the desired script. I'm guessing it's a simple thing I'm missing. Can anybody help out?

PS:忽略 foobar，我实际上有一个真实的 id，我不想分享.

PS: Ignore the foobar, I have a real id actually in use that I didn't feel like sharing.

推荐答案

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

---

您是要在每次渲染此组件时一次又一次地获取和执行脚本，还是仅在此组件安装到 DOM 时一次?

Things change fast and this is outdated - see update

---

Do you want to fetch and execute the script again and again, every time this component is rendered, or just once when this component is mounted into the DOM?

也许试试这样的:

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

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

    document.body.appendChild(script);
}

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

However, this is only really helpful if the script you want to load isn't available as a module/package. First, I would always:

• 在 npm
上查找包
• 在我的项目中下载并安装包(npm install typekit)
• import 我需要的包(import Typekit from 'typekit';)

• Look for the package on npm
• Download and install the package in my project (npm install typekit)
• import the package where I need it (import Typekit from 'typekit';)

这可能是您从示例中安装包 react 和 react-document-title 的方式，并且有一个 npm 上可用的 Typekit 包.

This is likely how you installed the packages react and react-document-title from your example, and there is a Typekit package available on npm.

既然我们有了钩子，更好的方法可能是像这样使用 useEffect :

Now that we have hooks, a better approach might be to use useEffect like so:

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):

Which makes it a great candidate for a custom hook (eg: 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/JSX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！