javascript - 如何在我的React JS应用中显示常规JavaScript？(How to display regular javascript in my React JS app?)

Question

I'm trying to allow users to download songs to an audio playlist using input and FileReader() in regular javascript but nothing displays.

(我试图允许用户使用常规javascript中的input和FileReader（）将歌曲下载到音频播放列表中，但什么也不显示。)

I've already done most of my code in regular Javascript and I feel it might be difficult to transfer it into all ReactJS code.

(我已经用普通的Javascript完成了大部分代码，并且感觉很难将其转移到所有ReactJS代码中。)

 import React from 'react'; import { Link } from 'react-router-dom'; import $ from "jquery"; var Download = (props) => { function other() { console.log("It's working"); var input = document.createElement("INPUT"); input.id = "upload-file"; input.type = "file"; input.multiple = true; var cloneInput = input.cloneNode(true); cloneInput.id = "cloneInput"; var destinationDiv = document.createElement("div"); destinationDiv.id = "destination"; var destination = document.getElementById('destination'); destinationDiv.innerHTML = "destination"; var appendInput = document.body.appendChild(input); if (appendInput) { console.log("yay"); } document.body.appendChild(destinationDiv); var inputId = document.getElementById('upload-file'); if (inputId) { inputId.addEventListener('change', function() { var file; var destination = document.getElementById('destination'); var audioAlreadyUsed = true; var ulAlreadyAdded = true; var alreadyUsed = true; // Looping in case they uploaded multiple files for (var x = 0, xlen = this.files.length; x < xlen; x++) { let a = document.createElement('a'); file = this.files[x]; a.innerHTML = file.name; console.log(file.name); if (file.type.indexOf('audio/mp3') != -1) { // Very primitive "validation" var reader = new FileReader(); reader.onload = function(e) { var ul = document.createElement("UL"); ul.id = "playlist"; var audio = document.createElement("AUDIO"); audio.id = "audio"; // audio.src = e.target.result; audio.controls = true; audio.preload = "none"; if (audioAlreadyUsed) { destination.appendChild(audio); audioAlreadyUsed = false; } if (ulAlreadyAdded) { destination.appendChild(ul); ulAlreadyAdded = false; } var li = document.createElement("LI"); li.class = "active"; li.id = "liID"; var clone = li.cloneNode(true); document.getElementById("playlist").appendChild(clone); a.href = e.target.result; clone.appendChild(a); //PLAYLIST CODE var audio; var playlist; var tracks; var current; var len; var link; var par; init(); function init() { current = 0; audio = $('audio'); playlist = $('#playlist'); tracks = playlist.find('li a'); len = tracks.length - 1; audio[0].volume = .10; // audio[0].play(); playlist.find('a').click(function(e) { e.preventDefault(); link = $(this); current = link.parent().index(); run(link, audio[0]); }); audio[0].addEventListener('ended', function(e) { current++; if (current == len) { current = 0; link = playlist.find('a')[0]; } else { link = playlist.find('a')[current]; } run($(link), audio[0]); }); } function run(link, player) { player.src = link.attr('href'); par = link.parent(); par.addClass('active').siblings().removeClass('active'); audio[0].load(); // Show loading animation. var playPromise = audio[0].play(); if (playPromise !== undefined) { playPromise.then(_ => { // Automatic playback started! // Show playing UI. // We can now safely pause video... audio.pause(); }) .catch(error => { // Auto-play was prevented // Show paused UI. }); } }; }; reader.readAsDataURL(file); }; } }); }; }; return ( < div > { other() } < /div>) }; export default Download; 

I've been stuck on this for quite some time now.

(我已经坚持了很长时间了。)

My code runs in the console but nothing displays on the page.

(我的代码在控制台中运行，但是页面上没有任何显示。)

Any suggestions?

(有什么建议么？)

  ask by DDavis25 translate from so

Answer 1

Despite the body of this questioning appearing to deviate from the title, I am going to tackle the problem within the title: How do I import javascript files into my react components?

(尽管此问题的内容似乎与标题有所不同，但我将解决标题中的问题： 如何将javascript文件导入到我的react组件中？)

The answer is pretty simple.

(答案很简单。)

I chose to make a directory structure of:

(我选择使目录结构为：)

1. ./dummyDir
2. ./dummyDir/react-src/
3. ./dummyDir/react-src/src

This all can be seen within reactjs.org.

(所有这些都可以在reactjs.org中看到。)

And then, all of your react/javascript specific code will go in .../src/ .

(然后，您所有的react / javascript特定代码都将放入.../src/ 。)

So, you will have ./dummyDir/react-src/src/myJSFile.js

(因此，您将拥有./dummyDir/react-src/src/myJSFile.js)

There are two more steps.

(还有两个步骤。)

The next step is being sure that you import the javascript and any classes (assuming you do some oop) into your .jsx file.

(下一步是为确保您import的JavaScript和任何类（假设你做一些OOP）到您的.jsx文件。)

Now, you can call any of the methods within your old javascript files right into your react components.

(现在，您可以在旧的javascript文件中直接调用您的react组件中的任何方法。)

The last step is hosting and deploying.

(最后一步是托管和部署。)

I won't go over hosting as much as hosting to a local environment.

(与托管本地环境相比，我不会做太多托管工作。)

I test host with apachectl on my local machine, for example.

(例如，我在本地计算机上使用apachectl测试主机。)

If that is the case for you, you might get hung up on not hosting from npm run serve as it looks like you are trying to plugin react instead of start with react.

(如果是这样，您可能会挂在不从npm run serve托管而不挂机的情况下，因为您似乎在尝试插入react而不是从react开始。)

Thus, you will want a bash script with something like this:

(因此，您将需要具有以下内容的bash脚本：)

deploy () {
  if [ ! -d build/ ]
  then
    echo -e "ERROR:
Does not appear to be correct directory;"
    echo -e "Dir /build/ not found;"
    return 1
  fi  
  echo -e "STARTING:"

  # Testing if build failed...
  npm run build
  if [ ! $? -eq 0 ] ; 
    then
      printf "
npm run build has failed...
"
      printf "
preserving previous ./build/
"
      return 2
  fi  

  if [ -d ../static/ ]
  then
    echo -e "REMOVING ../static/*"
    rm -r ./../static/ || echo "WARNING: DID NOT REMOVE DIR"
  else
    echo -e "DID NOT FIND ../static/ FOR REMOVAL"
  fi  

  # Redirecting the ls output to make it completely silent
  if ls ../precache-manifest* 1> /dev/null 2>&1;
  then
    echo -e "REMOVING ../precach*"
    rm -r ./../precache-manifest*  || echo "WARNING: DID NOT REMOVE CACHE"
  else
    echo -e "DID NOT FIND ../static/ FOR REMOVAL"
  fi  

  echo -e "RUNNING: npm run build"

  echo -e "COPYING OVER NEW BUILD DIR"
  cp -r build/* ../ 

  echo -e "DONE"
  return 0  #Bash is weird; 0 is true, 1 is false;
}