Реагировать - ошибка «асинхронно загруженный внешний скрипт» - PullRequest
Новая
       13

Реагировать - ошибка «асинхронно загруженный внешний скрипт»

0 голосов
/ 10 января 2019

Я безуспешно пытался решить эту проблему с найденными решениями здесь и здесь

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

У меня есть <script/>, который соответственно загружает свое содержимое, помещая его прямо на мирскую HTML-страницу, т.е. codepen 

<body>
    <div>
        <script type="text/javascript" src="https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsJS?OrgID=534011&Cat1=8-Week%20Sessions&hidecols=Gender,Ages,EndDate,Session,Openings&sort=day"></script>
    </div>
</body>

Однако я не могу получить те же результаты внутри реактивного компонента, т.е.: 

class Frame extends React.Component {
  componentDidMount() {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src =
      "https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsJS?OrgID=534011&Cat1=8-Week%20Sessions&hidecols=Gender,Ages,EndDate,Session,Openings&sort=day";
    script.async = true;
    document.querySelector(".frame-container").appendChild(script);
    //document.querySelector(".frame-container").insertBefore(script);
    //document.querySelector(".frame-container").innerHTML = script;
  }
  render() {
    return <div className="frame-container" />;
  }
}


function App() {
  return (
    <div className="App">
      <p>Did Frame load?</p>
      <Frame />
    </div>
  );
}

Я получаю следующую ошибку:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

Как правильно загрузить указанное содержимое <script /> внутри компонента React?

Также вот код песочница

...