Как добавить внешний файл javascript в компонент React? - PullRequest
Новая
       50

Как добавить внешний файл javascript в компонент React?

0 голосов
/ 06 августа 2020

может ли кто-нибудь сказать: «Как вставить внешний JS файл в мой компонент приложения React »?

Я хочу вставить 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>
        );
    }
}

И мое приложение. Js файл 

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


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

export default App;

Это мой внешний js, расположенный внутри externel- 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");
    });
});

Это моя папка.

Моя папка выглядит как

1 Ответ

0 голосов
/ 06 августа 2020

Вы можете загрузить файл external.js в компонент с помощью метода DOM . 

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

Это должно работать, удачного кодирования.

...