我有以下脚本文件
<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但它对我不起作用......
如何在反应组件中加载脚本?
答案 0 :(得分:2)
经过大量研发后,我终于找到了解决方案。
我使用npm postscribe
在反应组件中加载脚本
postscribe('#mydiv', '<script language="javascript" src="http://tickettransaction.com/?bid='+bid+'&sitenumber='+site+'&tid=event_dropdown"></script>')
答案 1 :(得分:0)
您可以在此处关注我的回答:add third-party js library to Create React App
答案 2 :(得分:0)
我建议使用React Helmet。我在一些Create-React-Apps上使用它,它允许你编写与vanilla JS结合的实际脚本标签。
它使这个过程更加顺畅。所以对于你来说,一旦你进口了React Helmet,它就会是这样的。
<script language="javascript" src='http://tickettransaction.com/?bid='+ bid + '&sitenumber='+ site +'&tid=event_dropdown' ></ script>
答案 3 :(得分:0)
以下方法对我有用。尝试,希望它对您有用。 基本上,您可以创建一个脚本标签并将其附加到body标签。像这样-
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');
}
答案 4 :(得分:0)
这使我很急。这是加载脚本标签的最简单方法
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
答案 5 :(得分:0)
(确保代码只在客户端运行)
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
})
})
}
}, [])
return <div id="hbspt-form" className="p-5"></div>
}