如何在反应组件中加载脚本

Posted

技术标签:

【中文标题】如何在反应组件中加载脚本【英文标题】:How to load script in react component 【发布时间】:2018-09-25 19:50:38 【问题描述】:

我有以下脚本文件

<script language="javascript">

document.write('<script language="javascript" src="http://tickettransaction.com/?bid='+bid+'&sitenumber='+site+'&tid=event_dropdown" ></' + 'script>');
</script>

我关注了这个Adding script tag to React/JSX,但它对我不起作用...

如何在我的 react 组件中加载脚本?

【问题讨论】:

需要更多有关此脚本运行位置的上下文来解决此问题。另外你是什么意思如何在我的反应组件中加载脚本? 我希望你知道 react 使用虚拟 DOM。 @AshishChoudhary 不要将它附加到 this.instance。尝试直接将其附加到文档中。 尝试将网址更改为https://(使用s)看看是否有帮助。那么当您从componentDidMount 执行document.body.appendChild 时会出现什么错误? @AshishChoudhary 您的脚本实际上是在加载后尝试使用 document.write,这是不允许的。您可能需要 (1) 通过嵌入 html 来加载它。或 (2) 将脚本中的所有document.write 替换为appendChild 【参考方案1】:

经过大量的研发,我终于找到了我的解决方案。

我已经使用npm postscribe 在 react 组件中加载脚本

postscribe('#mydiv', '<script language="javascript" src="http://tickettransaction.com/?bid='+bid+'&sitenumber='+site+'&tid=event_dropdown"></script>')

【讨论】:

天哪,谢谢你的这篇文章!我花了更多的时间来尝试让亚马逊原生广告加载到反应组件中,这成功了。任何可能在这里寻找相同内容的人,请像这样设置您的 componentDidMount:componentDidMount() postScribe('#YourDivId','copy + paste amazon code here'); 【参考方案2】:

以下方法对我有用。试试看,希望它对你有用。 基本上,您可以创建一个脚本标签并将其附加到正文标签。像这样——

var tag = document.createElement('script');
tag.async = true;
tag.src = 'THE PATH TO THE JS FILE OR A CDN LINK';
var body = document.getElementsByTagName('body')[0];
body.appendChild(tag);

您可以在这样的反应的生命周期挂钩上使用它。

componentDidMount() 
    var loadScript = function (src) 
      var tag = document.createElement('script');
      tag.async = false;
      tag.src = src;
      var body = document.getElementsByTagName('body')[0];
      body.appendChild(tag);
    

    loadScript('PATH TO THE JS FILE OR CDN URL');
  

【讨论】:

【参考方案3】:

一个 2021 TypeScript 示例,使用与 NextJS 一起使用的功能组件

(确保代码仅在客户端运行)


declare global 
  interface Window 
    hbspt: any
  


export default function Contact() 
  useEffect(() => 
    if (window && document) 
      const script = document.createElement('script')
      const body = document.getElementsByTagName('body')[0]
      script.src = '//js.hsforms.net/forms/v2.js'
      body.appendChild(script)
      script.addEventListener('load', () => 
        window.hbspt.forms.create(
          // this example embeds a Hubspot form into a React app but you can tweak it for your use case
          // any code inside this 'load' listener will run after the script is appended to the page and loaded in the client
        )
      )
    
  , [])

  return <div id="hbspt-form" className="p-5"></div>

【讨论】:

【参考方案4】:

我建议使用React Helmet。我已经在几个 Create-React-Apps 上使用了它,它允许您编写结合 vanilla JS 的实际脚本标签。

它使过程更加顺畅。所以对你来说,一旦你导入了 React Helmet,它就会是这样的。

<script language="javascript" src='http://tickettransaction.com/?bid='+ bid + '&sitenumber='+ site +'&tid=event_dropdown' ></ script>

【讨论】:

【参考方案5】:

这救了我。这是加载脚本标签的最简单方法

https://www.npmjs.com/package/react-script-tag

import ScriptTag from 'react-script-tag';

const Demo = props => (
<ScriptTag src="/path/to/resource.js" />
);

还有其他方法可以做到这一点:

https://medium.com/better-programming/4-ways-of-adding-external-js-files-in-reactjs-823f85de3668

【讨论】:

【参考方案6】:

2022 年更新基于 Class 以及 Functional 组件

您可以如下创建一个函数,然后在 componentDidMount 中使用它:

function loadScript(url, callback)

    let script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState)  //IE
        script.onreadystatechange = function()
            if (script.readyState == "loaded" ||
                    script.readyState == "complete")
                script.onreadystatechange = null;
                callback();
            
        ;
     else   //Others
        script.onload = function()
            callback();
        ;
    

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);


// For class based components
componentDidMount() 
    loadScript("scriptUrl", callback());


// For functional components
useEffect(() => 
    loadScript("scriptUrl", callback());
, [])

来源:add third-party js library to Create React App

【讨论】:

链接会随着时间的推移而变化,请避免添加链接,而是在此处发布链接中的亮点作为答案 @Technotronic 它是我对 *** 的回答,因此链接不会改变。此外,由于该问题已在 *** 上得到解答,因此应将其标记为重复问题。 来自“我如何写一个好的答案” (***.com/help/how-to-answer) > 鼓励链接到外部资源,但请在链接周围添加上下文,以便您的其他用户了解它是什么,并且为什么它在那里。始终引用重要链接中最相关的部分,以防目标站点无法访问或永久离线。

以上是关于如何在反应组件中加载脚本的主要内容,如果未能解决你的问题,请参考以下文章

如何在 WebPartZone 中加载 highchart 脚本

如何在反应中从文件中加载数据?

如何在 webpack 中加载 sass 样式表中使用的图像?

无法在其他类组件中加载 React 类组件

如何在复合组件中加载资源包属性文件?

如何在脚本中加载 tflite 模型?