如何在react组件中加载脚本

IT技术 javascript reactjs jsx
2021-05-21 03:57:36

我有以下脚本文件

<script language="javascript">

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

我按照这个将脚本标签添加到 React/JSX但它对我不起作用......

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

4个回答

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

我曾经npm postscribe在react组件中加载脚本

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

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

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

你可以在像这样react的生命周期钩子上使用它。

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');
  }

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

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

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

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

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