JavaScript将脚本标签添加到React / JSX

  • Z时代
  • 2024-01-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正在使用，而我不想共享。

回答：

回答：

您是否想在每次渲染此组件时一次或一次将该组件安装到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
}

以上是 JavaScript将脚本标签添加到React / JSX 的全部内容， 来源链接： utcz.com/qa/425456.html

回到顶部