如何將外部 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

React 也是 Javascript（jsx 是編寫 javascript 代碼的另一種方式/語法，然后轉換為 javascript），因此您可以在其中使用任何 javascript 文件。 為此，首先檢查 javascript 文件是否導出了您想要在您的反應組件中使用的內容，然后檢查您是否將其導入到包含反應組件的文件中。

Answer 2

可以在 html 中添加<script>標簽。 但是不建議將操作 DOM 的 javascript 代碼與 React 一起使用。 模態框或彈出窗口也可以通過反應 state 輕松處理。 您還可以找到幾個庫。 例如， https://www.npmjs.com/package/react-modal

Answer 3

假設您的外部 JS 文件是Temp.js ，其中包含以下代碼或 function。

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

為了滿足當前情況，您將該文件移動|將該文件復制到您的組件所在的同一文件夾中

現在只需將其添加到您的組件中

import {foo} from "./temp";

這里你 go 你已經導入了文件

現在如何使用它，因為它是 function

所以把它簡單地稱為foo()