如何将外部 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()