Далее js не загружается скрипт инфограммы - PullRequest
Новая
       5

Далее js не загружается скрипт инфограммы

0 голосов
/ 23 января 2020

Я пытаюсь вставить инграмму в свой проект, и мне нужно вставить скрипт, и я не знаю, почему он не работает.

У меня есть все мои скрипты в _app.js, и он работает нормально, но я не знаю, почему он не загружает этот скрипт в частности ... Я имею в виду, когда я проверяю код, я вижу скрипт, но не загружаю графику c.

Я уже пытался загрузить его в 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")

1 Ответ

0 голосов
/ 23 января 2020

Наконец-то я нашел решение. Я должен внести изменения в мой компонент Graphi c, например: 

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