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

【问题标题】：How to add external javascript file in React's component?如何在 React 的组件中添加外部 javascript 文件？
【发布时间】：2020-11-26 19:55:34
【问题描述】：

谁能说“如何在我的 react 应用组件中插入外部 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");
    });
});

这是我的文件夹。

【问题讨论】：

文件在哪里...看起来怎么样？你可以直接导入...
现在，我包含了有问题的外部 js 文件。请参考如果我导入了，我得到一个错误。
你的外部 JavaScript 文件在做经典的 DOM 工作？您可以使用 ref 访问此属性
我听不懂。你能深入解释一下吗？
external.js 中的所有代码都可以/应该在 React 中完成

标签： javascript html reactjs web

【解决方案1】：

您可以借助DOM方法在组件中加载external.js文件。

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

这应该可行，快乐编码。

【讨论】：

我在哪里添加这个？ navbar.js 还是 app.js？
请在 Navbar.js 中添加。
如果这对您有帮助，请为答案投票。