Как добавить внешний файл javascript в реагирующий компонент

Question

У меня есть компонент реагирования (jsx), который показывает форум и несколько изображений, у меня также есть кнопка, которая показывает всплывающее или модальное окно, но это всплывающее окно запрограммировано с помощью JavaScript во внешнем файле.
Я хочу загрузить этокод в мой компонент.
Я использовал тег сценария и не работал. есть идеи ? это мой внешний файл JavaScript:

let popup = document.getElementById('popup');
let modalContainer = document.getElementById('modal-container');
let buttonTarget = document.getElementById('button-target');
let cross = document.getElementById('cross');


buttonTarget.addEventListener('click', openModal);
cross.addEventListener('click', closeModal);

   function openModal() {
    popup.style.display = 'block';
    modalContainer.style.display = 'block';
  }

  function closeModal() {
    popup.style.display = 'none';
    modalContainer.style.display = 'none';
  }

Answer 1

Это можно сделать, добавив тег <script> в ваш HTML. Но javascript-код, который манипулирует DOM, не рекомендуется использовать вместе с React. Также модалы или всплывающие окна могут легко обрабатываться по состоянию реакции. И вы можете найти несколько библиотек. например, https://www.npmjs.com/package/react-modal

Answer 2

Допустим, ваш внешний JS-файл Temp.js, содержащий следующий фрагмент кода или функцию.

export function foo(){
 //some code here}

Для соответствия текущей ситуации вы перемещаете | копируете этот файл в ту же папку, где находится ваш компонент

теперь просто добавьте это к вашему компоненту

import {foo} from "./temp";

здесь вы импортировали файл

Теперь Как использовать это как функцию

так назовите это просто foo()

Answer 3

React также является Javascript (jsx - это еще один способ / синтаксис написания кода JavaScript, который затем переносится в JavaScript), так что вы можете использовать любой файл JavaScript внутри него. Для этого сначала убедитесь, что файл javascript экспортирует то, что вы хотите использовать в компоненте реагирования, а затем проверьте, импортировали ли вы его в файл, содержащий компонент реакции.