Nextjs 不加載信息圖腳本

Question

我試圖在我的項目中插入一個信息圖，我必須粘貼腳本，但我不知道為什么它不起作用。

我把我所有的腳本都放到_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")

Answer 1

最后我喜歡一個解決方案。 我必須像這樣在我的 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;

Nextjs 不加載信息圖腳本

問題描述

1 個解決方案

解決方案1
0 2020-01-23 15:07:42

Nextjs 不加載信息圖腳本

問題描述

1 個解決方案

解決方案1 0 2020-01-23 15:07:42

解決方案1
0 2020-01-23 15:07:42