Как импортировать / требовать модули после рендеринга приложения React на локальном хосте? - PullRequest
Новая
       39

Как импортировать / требовать модули после рендеринга приложения React на локальном хосте?

0 голосов
/ 11 июля 2019

Я выделяю необходимые медиа (видео) в приложении реакции после процесса рендеринга в приложении React. Но после завершения рендеринга мой медиафайл не будет рассматриваться как статический файл. Браузер EncodeURL моего необходимого модуля.

У меня есть куча файлов записи CCTV, местоположение которых хранится в текстовых файлах. Текстовые файлы дают адрес для реагирования приложения, которое является соответствующими модулями, для которых требуется приложение. 

import  React, {Component, Fragment} from "react";
import {Header} from "./header";
import * as fs from 'browserify-fs';  
import ReactFileReader from 'react-file-reader';
import dirlist from "./data.txt";
export default class Cam extends Component {

    constructor(props)
    {
      super(props);
      this.state={
        text: "",
        resource:[],
        };
    }

componentDidMount() 
  {
    this.readTextFile(this.props.txt);
      // this.timerFun()
  }

  readTextFile = file => {
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", dirlist, true);
    rawFile.onreadystatechange = () => {
      if (rawFile.readyState === 4) {
        if (rawFile.status === 200 || rawFile.status == 0) {
          var allText = rawFile.responseText;
          this.setState({
            text: allText
          });
        }
      }
    };
    rawFile.send(null);
  };

  render () 
        {
          let myar= [];

     let string = this.state.text.split("\n");
     for (var entry of string.entries()) {
          var entry = 'require("./' +entry+'")'
          // console.log(entry)

          this.state.resource.push(entry.replace(/[0-9],/,""))
           }

console.log(this.state.resource)
// console.log(this.state.data)

    return (
      // <Header></Header>
              // WRITE autoPlay in Beteween Video Tag for Auto Play
        <Fragment>
        <nav className="d-flex align-items-center">
            <div className="nav-title mr-auto">Sunbots</div>
            </nav>
            &nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;
            <div className="camui">

              <video  ref="vidF" onEnded={this.next.bind(this)}  width="440vw" height="230vh"  controls  src="" poster="https://i0.wp.com/anglicanfrontiers.com/wp-content/uploads/2019/01/Video-icon.png?ssl=1"></video>
              &nbsp;&nbsp;&nbsp;&nbsp;

            </Fragment>
      );
  }  
}

сетевая панель показывает

Ток: 

http://localhost:3000/require(%22./cam04_2019_06_19__12_00_06.mp4%22)

(Здесь я не могу воспроизвести видео, потому что javascript генерирует массив необходимого модуля)

Ожидаемый адрес: http://localhost:3000/static/media/cam01_2019_06_19__12_00_06.a6576fe4.mp4

(Здесь я могу воспроизвести видео, потому что в своем коде я предварительно определил файл как необходимый модуль)

...