JavaScript将脚本标签添加到ReactJSX

JavaScript将脚本标签添加到React / JSX 编辑：事情变化很快，这已经过时了-查看更新

---

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