[英]Nextjs dont load infogram script
我试图在我的项目中插入一个信息图,我必须粘贴脚本,但我不知道为什么它不起作用。
我把我所有的脚本都放到_app.js
,它工作正常,但我不知道为什么它不特别加载这个脚本......我的意思是,当我检查代码时,我可以看到脚本但不知道不加载图形。
我已经尝试过将其加载到componentDidMount
内_app
(和它的作品),但是,当我浏览到该网站,并尝试这样的崩溃:
<script dangerouslySetInnerHTML={{
__html: `
!function(e,i,n,s){var t="InfogramEmbeds",d=e.getElementsByTagName("script")[0];if(window[t]&&window[t].initialized)window[t].process&&window[t].process();else if(!e.getElementById(n)){var o=e.createElement("script");o.async=1,o.id=n,o.src="https://e.infogram.com/js/dist/embed-loader-min.js",d.parentNode.insertBefore(o,d)}}(document,0,"infogram-async")}} />
感谢您的任何帮助。
我的结构是:
- pages
- _app.js
- _document.js
- _index.js
-components
- graphic
- index.js
- public
- static
-hello.js ---> this is my script file!
_APP.JS:
import Head from "next/head";
import App from "next/app";
import React from "react";
export default class MyApp extends App {
static async getInitialProps() {
// code
}
render(){
return(
<div>
<Head>
<link href="https://fonts.googleapis.com/css?family=Montserrat|Seymour+One&display=swap" rel="stylesheet" />
<title>En vivo</title>
<script type="text/javascript" src="/static/hello.js"></script> // script to load
</Head>
<Graphic />
</div>
)
}
}
Graphic.js
import React from "react";
function Graphic() {
return (
<>
<div className="infogram-embed" data-id="f86abba0-e624-4ba7-ae51-ac8ab88c1bf7" data-type="interactive" data-title="Untitled dashboard"></div>
</>
);
}
export default Graphic;
Hello.js
!function(e,i,n,s){var t="InfogramEmbeds",d=e.getElementsByTagName("script")[0];if(window[t]&&window[t].initialized)window[t].process&&window[t].process();else if(!e.getElementById(n)){var o=e.createElement("script");o.async=1,o.id=n,o.src="https://e.infogram.com/js/dist/embed-loader-min.js",d.parentNode.insertBefore(o,d)}}(document,0,"infogram-async")
最后我喜欢一个解决方案。 我必须像这样在我的 Graphic 组件中进行更改:
import React { useEffect, useState } from "react";
function Graphic(props) {
const url = props.data;
useEffect(() => {
const script = document.createElement("script");
script.src = !(function(e, i, n, s) {
var t = "InfogramEmbeds",
d = e.getElementsByTagName("script")[0];
if (window[t] && window[t].initialized)
window[t].process && window[t].process();
else if (!e.getElementById(n)) {
var o = e.createElement("script");
(o.async = 1),
(o.id = n),
(o.src = "https://e.infogram.com/js/dist/embed-loader-min.js"),
d.parentNode.insertBefore(o, d);
}
})(document, 0, "infogram-async");
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, [url]);
return (
<>
{url.map(el => (
<>
<div
className="infogram-embed"
data-id={el.value}
data-type="interactive"
data-title="Untitled dashboard"
></div>
</>
))}
</>
);
}
export default Graphic;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.