如何在 React 的组件中添加外部 javascript 文件？

Question

谁能说“如何在我的反应应用程序组件中插入外部 JS 文件”？

我想在我的navbar.js中插入 js 文件，这也是我的组件。

import React, { Component } from "react";

export default class Navbar extends Component {
    render() {
        return (
            <nav>
                <div class="hamburger">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
                <ul class="nav-links">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Projects</a></li>
                </ul>
            </nav>
        );
    }
}

还有我的 app.Js 文件

import React from 'react';
import './App.css';
import Navbar from "./components/navbar";


function App() {
  return (
    <>
      <Navbar />
    </>
  );
}

export default App;

这是我放置在 externel-js 文件夹内的外部 js。

const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");

hamburger.addEventListener("click", () => {
    navLinks.classList.toggle("open");
    links.forEach(link => {
        link.classList.toggle("fade");
    });
});

这是我的文件夹。

Answer 1

您可以借助DOM Method将external.js文件加载到组件中。

componentDidMount () {
    const script = document.createElement("script");
    script.src = "/path/to/external.js";
    script.async = true;
    document.body.appendChild(script);
}

这应该工作，快乐编码。