如何将外部 javascript 文件添加到 React 组件中

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 文件是否导出了您想要在您的 react 组件中使用的内容，然后检查您是否将其导入到包含 react 组件的文件中。

Answer 2

假设您的外部 JS 文件 Temp.js包含以下代码或函数。export function foo(){ //some code here}为了满足当前情况，您将该文件移动|复制到您的组件所在的同一文件夹现在只需将其添加到您的组件中import {foo} from "./temp";在这里你已经导入了文件现在如何使用它，因为它是功能所以简单地称之为 foo()