我如何将本地Js文件添加到我的React组件之一?

Question

我正在重建我的投资组合网站到一个SPA，并希望将情态添加到我的一个页面。它们的JS被保存到"main.js"文件和标签放在我的HTML文件。问题是它不起作用，我不知道为什么。如果你需要更多的信息，请告诉我，我是新手。

组件:

import React, { Component } from 'react';
import toDoListApp from '../mockups/to-do-list-img..jpg';
import pokeMockup from '../mockups/mockup-poke.jpg';
import ExpatColMock from '../img/colombia_logo.png';
import DogAPIMock from '../mockups/mockup-doggie.gif';
import ScriptTag from 'react-script-tag';
let aScript = props => (
<ScriptTag type="text/javascript" src="../js/main.js" />
)
class Work extends Component {

render() {
return (
<section>
<div>
{/* Modal Background and Modal */}
<div className="mCustomScrollbar" data-mcs-theme="dark" id="modal-background">
<div id="modal">
<span id="close-btn">×</span>
<img className="modal-img" src="mockups/mockup.png" alt="expatcolombia" />
<h2 className="modal-title">Expat Colombia</h2>
<div className="modal-text">
<h3>Description</h3>
<p>Expat Service for people moving to Colombia. They provide consultations, tours, and assist in housing.</p>
<h3>Dependencies</h3>
<p>HTML, CSS, Javascript</p>
</div>
<div className="buttons">
<a href="https://drxl95.github.io/Colombia/" target="_blank">Visit</a>
<a href="https://github.com/Drxl95/Colombia" target="_blank">Github</a>
</div>
</div>
</div>
{/* Modal Background and Modal */}
<div className="mCustomScrollbar2" data-mcs-theme="dark" id="modal-background2">
<div id="modal2">
<span id="close-btn2">×</span>
<img className="modal-img2" src="mockups/poke-mockup.jpg" alt="expatcolombia" />
<h2 className="modal-title">PokemonAPI</h2>
<div className="modal-text2">
<h3>Description</h3>
<p>Pokemon-themed App with a that includes names, images, and stats of different Pokemons.</p>
<h3>Dependencies</h3>
<p>Javascript, JQuery, Ajax</p>
</div>
<div className="buttons2">
<a href="poke_demo.html" target="_blank">Demo</a>
<a href="https://github.com/Drxl95/PokemonAPI" target="_blank">Github</a>
</div>
</div>
</div>
</div>
<div>
<header className="ScriptHeader">
<div>
<h1>My Work</h1>
</div>
</header>
<section id="work">
{/*****Image size (height) is paramount to keep the photos formatted properly*****/}
{/* Image row 1 */}
<div className="row">
<div className="column">
<div className="container">
<img src={toDoListApp} className="image" alt="to-do-list-api" />
<a href="https://github.com/Drxl95/To-Do-List" target="_blank">
<div className="overlay">
<div className="text">Simple jQuery To Do List App</div>
</div>
</a>
</div>
</div>
<div className="column">
<a id="open-btn2">
<div className="container">
<img src={pokeMockup} className="image" alt="PokemanAPI" />
<div className="overlay">
<div className="text">Pokemon-themed API app <br /></div>
</div>
</div>
</a>
</div>
<div className="column">
<a id="open-btn">
<div className="container">
<img src={ExpatColMock} className="image" alt="expatcolombia.com" />
<div className="overlay">
<div className="text">Expat Colombia</div>
</div>
</div>
</a>
</div>
<div className="column">
<a href="https://github.com/Drxl95/DogAlbum" target="_blank">
<div className="container">
<img src={DogAPIMock} className="image" alt="dogAPI-mockup" />
<div className="overlay">
<div className="text">Dog Album API</div>
</div>
</div>
</a>
</div>
</div>
{/* Image row 2 */}
{/* <div class="row">
<div class="column">
<a href="#">
<div class="container">
<img src="img/image-4.jpg" class="image">
<div class="overlay">
<div class="text">Example 4</div>
</div>
</div>
</a>
</div>
<div class="column">
<a href="#">
<div class="container">
<img src="img/image-5.jpg" class="image">
<div class="overlay">
<div class="text">Example 5</div>
</div>
</div>
</a>
</div>
<div class="column">
<a href="#">
<div class="container">
<img src="img/image-6.jpg" class="image">
<div class="overlay">
<div class="text">Example 6</div>
</div>
</div>
</a>
</div>
</div> */}
{/* partial */}
</section>
</div>
</section>
)
}
}
export default Work

外部JS文件

// select the open-btn button
let openBtn = document.getElementById('open-btn');
// select the modal-background
let modalBackground = document.getElementById('modal-background');
// select the close-btn 
let closeBtn = document.getElementById('close-btn');
// shows the modal when the user clicks open-btn
openBtn.addEventListener('click', function () {
modalBackground.style.display = 'block';
});
// hides the modal when the user clicks close-btn
closeBtn.addEventListener('click', function () {
modalBackground.style.display = 'none';
});
// hides the modal when the user clicks outside the modal
window.addEventListener('click', function (event) {
// check if the event happened on the modal-background
if (event.target === modalBackground) {
// hides the modal
modalBackground.style.display = 'none';
}
});
// select the open-btn button
let openBtn2 = document.getElementById('open-btn2');
// select the modal-background
let modalBackground2 = document.getElementById('modal-background2');
// select the close-btn 
let closeBtn2 = document.getElementById('close-btn2');
// shows the modal when the user clicks open-btn
openBtn2.addEventListener('click', function () {
modalBackground2.style.display = 'block';
});
// hides the modal when the user clicks close-btn
closeBtn2.addEventListener('click', function () {
modalBackground2.style.display = 'none';
});
// hides the modal when the user clicks outside the modal
window.addEventListener('click', function (event) {
// check if the event happened on the modal-background
if (event.target === modalBackground2) {
// hides the modal
modalBackground2.style.display = 'none';
}
});

// function addMusic() {
//     let navBarLists = document.getElementById('#navBarLists');
//     let musicListItem = document.createElement('li');
// }

Answer 1

您必须使用import模块并提取所需的函数和变量:

import React, { Component } from 'react';
import toDoListApp from '../mockups/to-do-list-img..jpg';
import pokeMockup from '../mockups/mockup-poke.jpg';
import ExpatColMock from '../img/colombia_logo.png';
import DogAPIMock from '../mockups/mockup-doggie.gif';
import ScriptTag from 'react-script-tag';
// import your js file
import defaultFunction, {secondaryFunction} from '../js/main';