Nextjs不加载信息图脚本答案

【问题标题】：Nextjs dont load infogram scriptNextjs不加载信息图脚本
【发布时间】：2020-01-23 14:17:10
【问题描述】：

我正在尝试在我的项目中插入一个信息图，我必须粘贴脚本，但我不知道它为什么不起作用。

我将所有脚本都放入_app.js，它运行良好，但我不知道为什么它没有特别加载这个脚本...我的意思是，当我检查代码时，我可以看到脚本，但不加载图形。

我已经尝试将它加载到 _app 内的 componentDidMount 中（并且它可以工作）但是当我导航到该站点并尝试这样时崩溃：

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

【问题讨论】：

也许this 会有所帮助。我对 nextjs 不熟悉，但将脚本放在div 中对我来说感觉很奇怪。那里的答案说脚本应该不在应用程序的div..（可能在真实head中）
谢谢@MoshFeu 我播下了这个答案，但对我没有用......

标签： javascript reactjs next.js

【解决方案1】：

最后我喜欢一个解决方案。我必须像这样在我的图形组件中进行更改：

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;

【讨论】：