Как выполнить сценарии в компоненте React. js? - PullRequest
Новая
       53

Как выполнить сценарии в компоненте React. js?

0 голосов
/ 31 марта 2020

Я получил файл HTML с двумя сценариями в голове, и я выясняю, как лучше всего выполнить их в своем приложении реакции. Первый скрипт загружает socket.io. js, а второй содержит код JS для системы загрузки:

Исходный код 

//...
  <head>
    <link rel="stylesheet" type="text/css" href="/css/upload.css" />
    <script src="/js/socket.io.js"></script>
    <script type="text/javascript" charset="utf-8">

      var socket = io.connect("/", { path: "/app/socket.io" });
      var SelectedFiles = [];
      var SelectedFile = 0;
      var paused = 0;
      var FReader;
      var dat;

      window.addEventListener("load", Ready);
      function Ready() {
      //...
      }
      function handleUploads() {
       //...
      }
      function StartUpload(Name, size) {


        FReader.onload = function(evnt) {
          socket.emit("Upload", {
          //... 
          });
        };
        socket.emit("Start", {
         //...
        });
      }
      function getBlocks(data) {
      //...

      }
      socket.on("MoreData", function(data) {
      //...
      });
      function UpdateBar(percent) {
      //...
      }
      socket.on("Done", function(data) {
      //...
      });

      function Refresh() {
        location.reload(true);
      }

    </script>
  </head>
  <body>
//...

First of Я переместил содержимое кода JS в новый файл JS с именем «upload-script. js», а затем использовал модуль «React Helmet» (https://www.npmjs.com/package/react-helmet), чтобы загрузить их. в заголовке документа при рендеринге компонента:

Мой код 

return (
      <Row className="mb-4">
        <Helmet>
          <link rel="stylesheet" type="text/css" href="/css/upload.css" />

          <script src="/js/socket.io.js" />

          <script src="/upload-script.js" />
        </Helmet>
        <Colxx xxs="12">

При проверке в браузере модуль корректно добавляет скрипты в заголовок документа, но выдает следующую ошибку : 

./src/containers/form-validations/upload-script.js
 Line 2:14:   'io' is not defined           no-undef
 Line 124:3:  Unexpected use of 'location'  no-restricted-globals

Браузер не может скомпилировать приложение, поскольку в файле JS upload-script. js содержатся переменные, которые определены только в первом сценарии. Как я могу решить это? Это хороший способ добавить сценарии в приложение React?

Будем весьма благодарны за любые предложения или рекомендации. Заранее спасибо.

...